/* ═══ 우주 탭 · 인트로 · 손맛 효과 · 캘린더 연동 창: 기존 스타일에서 옮겨 온 부분 (우주 탭은 늘 다크) ═══ */
#stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#gl, #fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fx { pointer-events: none; }
.labels, .mtags { position: absolute; inset: 0; pointer-events: none; }
.labels, .mtags, .sun-hint { transition: opacity 0.35s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* 행성 콜아웃: 행성 가장자리에서 45°로 뻗은 지시선 + 밑줄 라벨 */
.p-label { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; opacity: var(--dim, 1); transition: opacity 0.3s; }
.p-label .pl-lead { position: absolute; left: 0; top: 0; width: 21px; height: 1px; background: rgba(255, 255, 255, 0.34); transform-origin: 0 0; transform: rotate(-45deg); transition: background 0.2s; }
.p-label .pl-box { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 1px; padding: 0 2px 4px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.34); white-space: nowrap; pointer-events: auto; cursor: pointer; transition: border-color 0.2s; }
.p-label.flip .pl-lead { transform: rotate(-135deg); }
.p-label.flip .pl-box { left: auto; right: 14px; align-items: flex-end; padding: 0 4px 4px 2px; }
.p-label .pl-name { font-size: 15px; font-weight: 640; line-height: 1.2; color: var(--ink); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.8); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.p-label .pl-meta { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95); font-variant-numeric: tabular-nums; }
.p-label .m-fire { color: var(--sol-2); } .p-label .m-late { color: var(--late); }
.p-label.hot .pl-lead, .p-label:hover .pl-lead { background: var(--c); }
.p-label.hot .pl-box, .p-label .pl-box:hover { border-color: var(--c); }
.p-label.empty .pl-name { color: var(--ink-2); }
.p-label.hid { opacity: 0; }
.p-label.hid .pl-box { pointer-events: none; }
body.dragging .p-label .pl-box { pointer-events: none; }

.mtag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 2px; padding: 2px 7px 3px; border-radius: 6px; font-size: 13px; font-weight: 560; line-height: 1.35; white-space: nowrap; color: var(--ink); background: rgba(7, 9, 14, 0.82); border: 1px solid var(--line-2); will-change: transform; animation: fade 0.18s var(--ease) both; }
.mtag.imp { border-color: rgba(242, 196, 107, 0.5); }
.mtag.late { border-color: rgba(240, 113, 125, 0.55); color: #ffd6da; }

.sun-hint { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 24px); padding: 7px 14px; border-radius: 999px; background: rgba(9, 11, 17, 0.74); border: 1px solid var(--line-2); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-align: center; white-space: nowrap; pointer-events: none; will-change: transform; transition: opacity 0.35s var(--ease), border-color 0.2s, background 0.2s; }
.sun-hint b { font-size: 14px; font-weight: 600; color: var(--ink); }
.sun-hint span { font-size: 13px; color: var(--ink-3); }
.sun-hint b + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--ink-4); vertical-align: middle; }
.sun-hint.active { border-color: rgba(244, 162, 89, 0.55); background: rgba(40, 22, 8, 0.78); }
.sun-hint.active b { color: var(--sol-2); }
@media (max-width: 420px) { .sun-hint span { display: none; } }

.tooltip { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; min-width: 180px; max-width: 280px; padding: 10px 12px; border-radius: 9px; background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); animation: fade 0.15s var(--ease) both; }
.tt-top { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.tt-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.tt-title { margin-top: 3px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.tt-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.tt-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tt-hint { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); }
.late { color: var(--late) !important; } .imp { color: var(--imp) !important; } .hot { color: var(--sol) !important; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: flex; align-items: center; gap: 10px; will-change: transform; }
.g-orb { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; flex: none; background: url("../textures/thumbs/moon.png") center / 125% no-repeat; box-shadow: 0 0 0 1.5px var(--c), 0 0 18px color-mix(in srgb, var(--c) 70%, transparent); transition: box-shadow 0.2s, transform 0.2s var(--ease); }
.drag-ghost.is-orb .g-orb { background: radial-gradient(circle at 36% 34%, #fff1d2, #ffb04a 50%, #e8601f 90%); box-shadow: 0 0 20px #ff8a3a; }
.drag-ghost.over-sun .g-orb { transform: scale(1.25); box-shadow: 0 0 0 2px var(--sol-2), 0 0 30px #ffa050; }
.g-title { margin-top: -11px; padding: 5px 10px; border-radius: 7px; background: var(--panel-solid); border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
body.dragging, body.dragging * { cursor: grabbing !important; }

/* ───────── 조작 편의: 이름표 · 포커스 칩 · 시점 버튼 · 조작 안내 ───────── */
.mtag .mt-t { overflow: hidden; text-overflow: ellipsis; }
.mtag .mt-go { display: none; width: 22px; height: 22px; margin: -1px -4px -1px 2px; place-items: center; border-radius: 5px; color: var(--ink-3); transition: background 0.12s, color 0.12s; }
.mtag.left { flex-direction: row-reverse; padding: 2px 7px 3px 7px; }
.mtag.left .mt-go { margin: -1px 2px -1px -4px; }
.mtag.live { pointer-events: auto; cursor: grab; padding-right: 6px; }
.mtag.live .mt-go { display: grid; }
.mtag.live:hover { border-color: var(--line-3); background: rgba(12, 14, 20, 0.95); }
.mtag .mt-go:hover { background: var(--sol); color: var(--sol-ink); }
.mtag.sel { border-color: rgba(255, 255, 255, 0.7); }
body.orbiting, body.orbiting * { cursor: grabbing !important; }
body.orbiting .mtag, body.orbiting .p-label .pl-box { pointer-events: none; }

.focus-chip { position: fixed; z-index: 18; left: 50%; top: calc(var(--top-h) + 10px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 13px; white-space: nowrap; animation: rise 0.25s var(--ease) both; transition: left 0.45s var(--ease); }
.focus-chip { left: calc((var(--bl) + 100vw - var(--sr)) / 2); }
.fc-back { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 4px; border-radius: 6px; color: var(--ink-2); font-weight: 560; transition: background 0.12s, color 0.12s; }
.fc-back:hover { background: var(--raise-2); color: var(--ink); }
.fc-sep { width: 1px; height: 16px; background: var(--line-2); }
.fc-name { font-weight: 650; }
.fc-en { color: var(--ink-3); font-size: 12px; }
body[data-view="calendar"] .focus-chip, body[data-view="calendar"] .view-ctl, body[data-view="list"] .focus-chip, body[data-view="list"] .view-ctl { display: none; }

.view-ctl { position: fixed; z-index: 16; right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; padding: 3px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: right 0.45s var(--ease); }
.vc-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: var(--ink-2); transition: background 0.12s, color 0.12s; }
.vc-btn:hover { background: var(--raise-2); color: var(--ink); }
.vc-btn[aria-pressed="false"] { color: var(--ink-3); }
.vc-sep { height: 1px; margin: 3px 6px; background: var(--line); }

.coach { position: fixed; z-index: 40; right: calc(max(24px, env(safe-area-inset-right, 0px)) + 54px); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 320px; padding: 14px 16px 14px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); animation: rise 0.3s var(--ease) both; transition: right 0.45s var(--ease); }
.coach-h { display: flex; align-items: center; justify-content: space-between; margin: -4px -6px 8px 0; font-size: 14px; font-weight: 680; }
.coach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.coach-list li { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--line); }
.coach-list .ck { color: var(--ink); font-weight: 600; }
.coach-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.coach-keys kbd { margin-left: 4px; }
.coach-foot { display: flex; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 639.98px) {
  /* 휴대폰: 고리 바깥의 빈 오른쪽 위 모서리에 가로로 */
  .view-ctl { top: calc(100px + env(safe-area-inset-top, 0px)); bottom: auto; right: 8px; flex-direction: row; gap: 2px; background: rgba(10, 12, 18, 0.62); }
  .view-ctl .vc-zoom, .view-ctl .vc-sep { display: none; }
  .vc-btn { width: 36px; height: 36px; }
  .focus-chip { top: calc(100px + env(safe-area-inset-top, 0px)); left: 8px; transform: none; }
  .coach { left: 8px; right: 8px; width: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .coach-list li { grid-template-columns: 112px 1fr; }
  body:has(.focus-chip:not([hidden])) .toasts { top: calc(144px + env(safe-area-inset-top, 0px)); }
}

/* ───────── 손맛: 완료 · 점화 순간 ───────── */
#juice { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; }
/* 체크 팝: 눌린 순간 튀어 오르며 초록으로 채워지고 체크 표시가 그려진다 */
.j-pop { animation: jPop 0.44s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes jPop { 0% { transform: scale(0.7); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
.b-check.j-pop, .check.j-pop, .nb-scheck.j-pop { background: var(--ok); border-color: var(--ok); color: #05210f; box-shadow: 0 0 16px rgba(99, 210, 149, 0.75); }
.j-pop .ico path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: jDraw 0.3s 0.06s ease-out forwards; }
@keyframes jDraw { to { stroke-dashoffset: 0; } }
.nb-btn.done.j-pop { box-shadow: 0 0 24px rgba(99, 210, 149, 0.8); }
.cmd-go.j-pop .ico path { stroke-dasharray: none; animation: none; }
/* 완료 중인 줄: 초록빛이 스치고 취소선이 그어진다 */
.j-done { background: linear-gradient(90deg, rgba(99, 210, 149, 0.17), rgba(99, 210, 149, 0.03)) !important; }
.j-done .b-t > span { color: var(--ink-2); background: linear-gradient(var(--ok), var(--ok)) no-repeat 0 56% / 0 1.5px; animation: jStrike 0.34s ease-out forwards; }
@keyframes jStrike { to { background-size: 100% 1.5px; } }
.j-done .lv-t, .j-done .body .t { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ok); }
/* 사라지는 줄(복제본): 옆으로 빠져나간다 */
.j-ghost { animation: jOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }
.j-ghost *, .j-ghost *::before, .j-ghost *::after { animation: none !important; transition: none !important; }
.j-ghost .b-t > span { background-size: 100% 1.5px; }
@keyframes jOut { 0% { opacity: 1; transform: none; } 30% { opacity: 1; transform: translateX(6px); } 100% { opacity: 0; transform: translateX(64px); } }
/* 새로 생긴 줄: 금빛 테두리로 잠깐 반짝 */
.j-enter { animation: jIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
@keyframes jIn { 0% { opacity: 0; transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(255, 213, 154, 0.7), 0 0 22px rgba(255, 190, 120, 0.35); } 30% { opacity: 1; transform: none; box-shadow: inset 0 0 0 1px rgba(255, 213, 154, 0.55), 0 0 18px rgba(255, 190, 120, 0.25); } 100% { box-shadow: inset 0 0 0 1px rgba(255, 213, 154, 0), 0 0 0 rgba(255, 190, 120, 0); } }
/* 집중 버튼: 불이 붙는 순간 */
.j-ign { animation: jIgn 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); color: var(--sol) !important; }
@keyframes jIgn { 0% { transform: scale(0.8); } 50% { transform: scale(1.4); filter: drop-shadow(0 0 8px #ff9a4a); } 100% { transform: scale(1); } }
/* 상단 진행 링: 완료 빛이 닿으면 튀어 오르며 숫자가 바뀐다 */
.ring-btn.bump { animation: jBump 0.65s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes jBump { 0% { transform: scale(1); } 35% { transform: scale(1.12); border-color: rgba(99, 210, 149, 0.75); box-shadow: 0 0 0 5px rgba(99, 210, 149, 0.16), 0 0 24px rgba(99, 210, 149, 0.45); } 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(99, 210, 149, 0); } }
.ring-btn.bump .ring-num { animation: jNum 0.5s ease-out; }
@keyframes jNum { 0% { transform: translateY(6px); opacity: 0.2; color: var(--ok); } 100% { transform: none; opacity: 1; } }
/* 집중 바: 불덩이가 태양에 닿으면 함께 타오른다 · 끝나면 가라앉는다 */
.nowbar.ignite { animation: nbIgnite 1.2s ease-out; }
@keyframes nbIgnite { 0% { border-color: #ffd59a; box-shadow: 0 0 0 1px rgba(255, 190, 110, 0.6), 0 0 60px rgba(255, 140, 50, 0.55); } 100% { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 40px rgba(244, 140, 60, 0.08); } }
.nowbar.ignite .nb-live { animation: nbLive 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes nbLive { 0% { transform: scale(0.6); } 50% { transform: scale(1.45); box-shadow: 0 0 34px rgba(255, 160, 70, 1); } 100% { transform: scale(1); } }
.nowbar.ignite::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 205, 150, 0.2) 50%, transparent 70%); transform: translateX(-100%); animation: nbSweep 0.9s ease-out forwards; }
@keyframes nbSweep { to { transform: translateX(100%); } }
.nowbar.leaving { animation: nbOut 0.28s ease-in forwards; pointer-events: none; }
@keyframes nbOut { to { opacity: 0; transform: translate(-50%, 16px); } }
/* 연속 완료 */
.j-float { position: fixed; z-index: 71; transform: translate(-50%, -100%); font-family: var(--f-num); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; color: #d2ffe6; text-shadow: 0 0 10px rgba(99, 210, 149, 0.9); pointer-events: none; animation: jFloat 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes jFloat { 0% { opacity: 0; transform: translate(-50%, -60%) scale(0.8); } 20% { opacity: 1; transform: translate(-50%, -115%) scale(1.06); } 100% { opacity: 0; transform: translate(-50%, -260%); } }
/* 오늘 할 일을 모두 끝냈을 때 */
.j-cele { position: fixed; z-index: 72; left: 50%; top: 42%; transform: translate(-50%, -50%); min-width: 260px; padding: 22px 30px 20px; border-radius: 16px; text-align: center; cursor: pointer; background: radial-gradient(120% 140% at 50% 0%, rgba(255, 214, 150, 0.16), rgba(10, 12, 18, 0.93) 62%); border: 1px solid rgba(255, 214, 150, 0.35); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 70px rgba(255, 190, 110, 0.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: jcIn 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.j-cele.out { animation: jcOut 0.45s ease-in forwards; }
.jc-k { font-family: var(--f-num); font-size: 11px; letter-spacing: 0.32em; color: #ffd59a; }
.jc-t { margin-top: 8px; font-size: 20px; font-weight: 720; letter-spacing: -0.02em; }
.jc-s { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
@keyframes jcIn { from { opacity: 0; transform: translate(-50%, -40%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes jcOut { to { opacity: 0; transform: translate(-50%, -56%) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { #juice { display: none; } }

/* ───────── 행성 이름표 속 할 일 줄 ───────── */
.p-label .pl-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; cursor: pointer; }
.p-label.flip .pl-head { align-items: flex-end; text-align: right; }
.p-label .pl-head:focus-visible { outline: 1px solid var(--line-3); outline-offset: 3px; border-radius: 3px; }
.pl-list { display: flex; flex-direction: column; gap: 1px; margin-top: 5px; }
.p-label.flip .pl-list { align-items: flex-end; }
.pl-row { display: flex; align-items: center; gap: 6px; height: 23px; max-width: 230px; padding: 0 5px 0 0; border-radius: 5px; font-size: 13px; line-height: 1; color: var(--ink-2); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9); cursor: pointer; touch-action: none; transition: background 0.12s, color 0.12s; }
.p-label.flip .pl-row { padding: 0 0 0 5px; }
.pl-row i { width: 2px; height: 11px; flex: none; border-radius: 1px; background: var(--ink-4); }
.pl-row.p1 i { background: #ff7a59; } .pl-row.p2 i { background: #f2c46b; } .pl-row.p3 i { background: #7c9cff; }
.pl-row .tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 176px; }
.pl-row.p1 .tt { color: var(--ink); font-weight: 560; }
.pl-row:hover, .pl-row:focus-visible { background: rgba(255, 255, 255, 0.07); color: var(--ink); outline: 0; }
.pl-row:hover .tt { color: var(--ink); }
.pl-d { flex: none; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pl-d.late { color: var(--late); }
.pl-more { align-self: flex-start; height: 18px; font-size: 11px; color: var(--ink-3); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95); transition: color 0.12s; }
.p-label.flip .pl-more { align-self: flex-end; }
.pl-more:hover { color: var(--ink); }
.p-label.sum .pl-list, .p-label.compact .pl-list { display: none; }
.p-label.down .pl-lead { transform: rotate(45deg); }
.p-label.flip.down .pl-lead { transform: rotate(135deg); }
.p-label.down .pl-box { bottom: auto; top: 14px; padding: 4px 2px 0 4px; border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, 0.34); }
.p-label.flip.down .pl-box { padding: 4px 4px 0 2px; }
.p-label.hot .pl-box { border-color: var(--c); }
.drag-ghost.lift .g-title { animation: fade 0.2s; }
@media (max-width: 639.98px) {
  .pl-row { height: 20px; font-size: 11.5px; }
  .pl-row .tt { max-width: 118px; }
  .pl-list { margin-top: 3px; }
}
.pl-list { transition: opacity 0.2s; }
body.dragging .pl-list { opacity: 0.3; }

/* ───────── 캘린더 연동 창 · 상세의 「캘린더에 추가」 ───────── */
.cs-seg { display: inline-flex; padding: 2px; margin-bottom: 12px; border-radius: 9px; border: 1px solid var(--line-2); }
.cs-seg button { height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13px; color: var(--ink-3); transition: background 0.12s, color 0.12s; }
.cs-seg button b { margin-left: 4px; font-weight: 600; color: var(--ink-2); }
.cs-seg button.on { background: var(--raise-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.cs-row { margin: 0 0 14px; }
.cs-how { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.cs-how li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.cs-how b { font-weight: 620; color: var(--ink); }
.cs-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.cs-prev { font-size: 13px; color: var(--ink-2); }
.cs-prev b { color: var(--ink); }
.cs-list { list-style: none; margin: 10px 0 14px; padding: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.cs-list li { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 12px; font-size: 12.5px; border-top: 1px solid var(--line); }
.cs-list li:first-child { border-top: 0; }
.cs-list .d { flex: none; min-width: 92px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cs-list .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.cs-list .r { color: var(--ink-3); display: inline-flex; }
.cs-list .more { color: var(--ink-3); }
.cs-lbl { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.cs-planets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cs-planets button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 7px; border-radius: 8px; font-size: 13px; color: var(--ink-2); border: 1px solid var(--line-2); transition: border-color 0.12s, color 0.12s, background 0.12s; }
.cs-planets button img { border-radius: 50%; }
.cs-planets button:hover { color: var(--ink); border-color: var(--line-3); }
.cs-planets button.on { color: var(--ink); border-color: var(--sol); background: rgba(244, 162, 89, 0.08); }
.cal-add { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.cal-add span { margin-right: 2px; }
.cal-add button { height: 26px; padding: 0 9px; border-radius: 6px; font-size: 12px; color: var(--ink-2); border: 1px solid var(--line-2); transition: border-color 0.12s, color 0.12s; }
.cal-add button:hover { color: var(--ink); border-color: var(--line-3); }
@media (max-width: 639.98px) { .cs-how li { grid-template-columns: 1fr; gap: 2px; } }

/* ───────── 구글 캘린더 연결 ───────── */
.gc-btn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 9px; margin-right: 6px; border-radius: 8px; font-size: 12.5px; font-weight: 560; color: var(--ink-2); border: 1px solid var(--line-2); transition: border-color 0.12s, color 0.12s, background 0.12s; }
.gc-btn:hover { color: var(--ink); border-color: var(--line-3); background: var(--raise); }
.gc-btn .g-logo { flex: none; }
.gc-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-4); }
.s-ok .gc-dot, .gc-dot.s-ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(99, 210, 149, 0.16); }
.s-busy .gc-dot, .gc-dot.s-busy { background: var(--sol); animation: pulse 1.2s ease-out infinite; }
.s-expired .gc-dot, .gc-dot.s-expired { background: var(--imp); }
.s-error .gc-dot, .gc-dot.s-error { background: var(--late); }
.gc-btn.s-expired { color: var(--imp); border-color: rgba(242, 196, 107, 0.4); }
.gc-card { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--sf2); margin-bottom: 6px; }
.gc-card.on { border-color: rgba(99, 210, 149, 0.28); }
.gc-top { display: flex; align-items: center; gap: 12px; }
.gc-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gc-top b { font-size: 14px; font-weight: 650; color: var(--ink); }
.gc-top span { font-size: 13.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.gc-pts { margin: 12px 0 14px; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.gc-connect { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 18px 0 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: #1f1f1f; background: #ffffff; border: 1px solid #dadce0; transition: background 0.12s, box-shadow 0.12s; }
.gc-connect:hover { background: #f6f8fb; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
.gc-connect .g-logo { width: 18px; height: 18px; }
.gc-connect.sm { height: 32px; padding: 0 12px 0 10px; font-size: 13px; }
.gc-err { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--late); background: rgba(240, 113, 125, 0.08); }
.gc-card .cs-row { margin: 14px 0 12px; }
.gc-card .btn-row a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.gc-key { display: flex; gap: 8px; margin-top: 10px; }
.gc-key input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--raise); color: var(--ink); font: inherit; font-size: 12.5px; outline: 0; }
.gc-key input:focus { border-color: var(--line-3); }
.gc-more { display: block; margin: -4px 0 12px; font-size: 12.5px; }
.gc-guide { margin: -2px 0 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--raise); font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.gc-guide > b { display: block; font-size: 13px; font-weight: 650; color: var(--ink); }
.gc-guide p { margin: 4px 0 8px; color: var(--ink-3); }
.gc-guide ol { margin: 0 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.gc-guide ol b { color: var(--ink); font-weight: 600; }
/* ── 시작 인트로: 태양이 켜지고 궤도가 그려진 뒤, 빛이 터지며 우주로 들어간다 (다시 열면 짧게, 누르면 바로 넘김) ── */
.intro { --k: 1; position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; background: radial-gradient(120% 90% at 50% 44%, #0b0d16 0%, #05060b 55%, #020205 100%); transition: opacity 0.85s var(--ease) 0.15s; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.intro.quick { --k: 0.45; }
.intro.out { opacity: 0; pointer-events: none; }
.in-stars { position: absolute; inset: -12%; transition: transform 1.1s cubic-bezier(0.55, 0, 0.2, 1), opacity 0.9s; }
.in-stars::before { content: ""; position: absolute; inset: 0; opacity: 0; animation: inStars calc(1.4s * var(--k)) ease-out forwards, inDrift 7s linear forwards;
  background-image:
    radial-gradient(1.2px 1.2px at 17% 23%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 71% 12%, #dfe6ff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 38% 77%, #ffe9cf 50%, transparent 52%), radial-gradient(1px 1px at 86% 64%, #fff 50%, transparent 52%),
    radial-gradient(0.9px 0.9px at 57% 41%, #cfd8ff 50%, transparent 52%), radial-gradient(1.1px 1.1px at 8% 58%, #fff 50%, transparent 52%);
  background-size: 157px 163px, 233px 211px, 311px 287px, 199px 241px, 127px 139px, 271px 257px; }
.intro.out .in-stars { transform: scale(1.7); opacity: 0; }
.in-flash { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 244, 226, 0.95), rgba(255, 196, 132, 0.55) 22%, rgba(244, 162, 89, 0.14) 48%, transparent 72%); transform: scale(0.15); }
.intro.out .in-flash { animation: inFlash 0.95s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
.in-core { position: relative; display: grid; place-items: center; transition: transform 0.95s cubic-bezier(0.6, 0, 0.25, 1), opacity 0.7s ease 0.2s; }
.intro.out .in-core { transform: scale(7); opacity: 0; }
/* 태양 뒤로 천천히 도는 빛줄기 */
.in-core::before { content: ""; position: absolute; width: 190%; aspect-ratio: 1; border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 196, 132, 0.16) 0deg 2.2deg, transparent 2.2deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.55) 34%, transparent 70%); mask: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.55) 34%, transparent 70%);
  animation: inRays calc(1.6s * var(--k)) ease calc(0.3s * var(--k)) forwards, inSpin 40s linear infinite; }
@keyframes inRays { to { opacity: 1; } }
@keyframes inSpin { to { transform: rotate(360deg); } }
.in-mark { position: relative; display: block; width: min(300px, 64vw); height: auto; overflow: visible; }
.in-glow, .in-sun { transform-box: fill-box; transform-origin: center; }
.in-glow { opacity: 0; animation: inGlow calc(1.3s * var(--k)) var(--ease) calc(0.12s * var(--k)) forwards, inBreath 3.2s ease-in-out calc(1.4s * var(--k)) infinite alternate; }
.in-sun { transform: scale(0); filter: drop-shadow(0 0 14px rgba(255, 178, 102, 0.8)) drop-shadow(0 0 42px rgba(244, 162, 89, 0.45)); animation: inSun calc(0.95s * var(--k)) cubic-bezier(0.3, 1.5, 0.5, 1) calc(0.08s * var(--k)) forwards; }
.in-orbit { fill: none; stroke: rgba(236, 238, 243, 0.62); stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: inOrbit calc(1.05s * var(--k)) cubic-bezier(0.45, 0, 0.2, 1) calc(0.38s * var(--k)) forwards; }
.in-moon { fill: #f1f3f8; opacity: 0; filter: drop-shadow(0 0 5px rgba(220, 230, 255, 0.9)); animation: inFade calc(0.45s * var(--k)) ease calc(0.95s * var(--k)) forwards; }
.in-word { display: flex; margin-top: clamp(18px, 3.6vh, 30px); padding-left: 0.34em; font-family: var(--f-ui); font-weight: 800; font-size: clamp(34px, 7.4vw, 62px); line-height: 1; letter-spacing: 0.34em; color: #eef0f5; animation: inTrack calc(1.25s * var(--k)) cubic-bezier(0.2, 0.7, 0.1, 1) calc(0.62s * var(--k)) both; transition: opacity 0.4s ease, transform 0.6s var(--ease); }
.in-word span { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(12px); background: linear-gradient(100deg, #eef0f5 0 38%, #ffd8ab 50%, #eef0f5 62% 100%) 120% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: inLetter calc(0.8s * var(--k)) var(--ease) calc((0.7s + var(--i) * 0.065s) * var(--k)) forwards, inShine 1.3s ease-in-out calc((1.55s + var(--i) * 0.05s) * var(--k)) forwards; }
.in-tag { margin-top: 14px; transition: opacity 0.35s ease, transform 0.6s var(--ease); }
.in-tag span { display: block; font-size: clamp(13px, 1.9vw, 15.5px); font-weight: 500; letter-spacing: 0.02em; color: var(--ink-2); opacity: 0; transform: translateY(8px); animation: inUp calc(0.75s * var(--k)) var(--ease) calc(1.18s * var(--k)) forwards; }
.intro.out .in-word, .intro.out .in-tag { opacity: 0; transform: translateY(-14px) scale(0.98); }
@keyframes inStars { to { opacity: 0.9; } }
@keyframes inDrift { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes inGlow { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes inBreath { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes inSun { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes inOrbit { to { stroke-dashoffset: 0; } }
@keyframes inFade { to { opacity: 1; } }
@keyframes inTrack { from { letter-spacing: 0.8em; padding-left: 0.8em; } to { letter-spacing: 0.34em; padding-left: 0.34em; } }
@keyframes inLetter { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes inShine { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@keyframes inUp { to { opacity: 1; transform: none; } }
@keyframes inFlash { 0% { opacity: 0; transform: scale(0.15); } 28% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
/* 인트로가 도는 동안 화면 장치(UI)는 숨겼다가, 우주로 들어가면서 차례로 나타난다 */
@media (prefers-reduced-motion: reduce) { .intro *, .intro *::before { animation-delay: 0s !important; } }