/* 크루톤 블루 테마 — 신뢰감 있는 블루·네이비 톤.
   도트 아트·티커·모션 같은 기존의 펜시한 요소는 그대로 두고 색만 공적인 블루로 바꾼다. */
:root {
  --ink: #0f1d3a;
  --muted: #5f6f8c;
  --paper: #f4f8ff;
  --surface: #fff;
  --line: #dde6f4;
  --lime: #5cc4ff;        /* 기존 포인트 변수: 하늘색 포인트 */
  --lime-dark: #0b3fb3;
  --blue: #1a5cff;
  --dark: #0b1f4d;
  --sky: #eaf3ff;
}
body { background: var(--paper); }
::selection { background: #cfe4ff; color: var(--ink); }

/* 헤더: 네이비 */
.site-header { background: linear-gradient(90deg, #0b1f4d, #132f72); border-bottom-color: #ffffff12; }
.main-nav { color: #b9c6e4; }
.main-nav a:hover, .main-nav a.active { color: #fff; }
.main-nav a.active:after { background: var(--lime); box-shadow: 0 0 10px #5cc4ffaa; }
.header-actions .icon-button { color: #dbe5fa; }
.header-login { background: #ffffff12; border-color: #ffffff30; color: #fff; }
.header-login span { color: var(--lime); }
@media (max-width: 850px) { .main-nav { background: #102a63; border-bottom-color: #ffffff1a; } }

/* 히어로: 네이비 → 로열 블루 하늘 */
.hero {
  color: #fff;
  background:
    radial-gradient(60% 70% at 78% 40%, #3d8bff55, transparent 70%),
    radial-gradient(40% 50% at 10% 100%, #22a6f240, transparent 70%),
    linear-gradient(160deg, #0b1f4d 0%, #123a8f 55%, #1a5cff 100%);
}
.hero:after { content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, #ffffff40, transparent); }
.hero .eyebrow { color: #cfe0ff; }
.eyebrow .live-dot { background: var(--lime); box-shadow: 0 0 0 4px #5cc4ff2e, 0 0 16px #5cc4ffaa; }
.hero h1 em { background: linear-gradient(100deg, #8fd8ff, #5cc4ff 45%, #ffffff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .hero-description { color: #c4d3f2; }
.hero-footnote { color: #a9bce4; }
.hero-footnote span:first-child { border-color: #ffffff40; color: var(--lime); }
.hero-art:before { background: radial-gradient(ellipse at 60% 40%, #5cc4ff1f, transparent 65%); }
.canvas-label, .canvas-corner { color: #a9bce4; }
.hero-meta { border-top-color: #ffffff1f; color: #a9bce4; }
.hero-meta .hero-manifesto { color: #dbe6ff; }
.motion-button { color: #a9bce4; }
.motion-button:hover { color: #fff; }

/* 버튼 */
.button-primary { background: linear-gradient(135deg, #1a5cff, #22a6f2); color: #fff; box-shadow: 0 10px 24px -12px #1a5cffcc; }
.button-primary:hover { background: linear-gradient(135deg, #2b6bff, #3cb4f6); }
.hero .button-primary { background: #fff; color: #0b3fb3; box-shadow: 0 12px 28px -14px #000a; }
.hero .button-primary:hover { background: #eaf3ff; }
.hero .button-outline { border-color: #ffffff59; color: #fff; background: #ffffff0f; }
.hero .button-outline:hover { background: #ffffff1f; }
.button-dark { background: var(--blue); }
.button-dark:hover { background: #0b3fb3; }

/* 티커: 블루 띠 */
.ticker { background: linear-gradient(90deg, #1a5cff, #22a6f2); color: #fff; border-bottom-color: #1a5cff; }

/* 카드·리스트 */
.project-card, .guest-card, .resource-card, .search-result, .task-item { border-color: var(--line); box-shadow: 0 8px 22px -18px #102a6e55; }
.project-card:hover { border-color: #9dbcf5; box-shadow: 0 16px 32px -20px #102a6e66; }
.progress-fill { background: linear-gradient(90deg, #1a5cff, #22a6f2); }
.count { background: #e3edff; color: #0b3fb3; }
.like-button[aria-pressed=true] { color: #0b3fb3; }
.like-button[aria-pressed=true] svg { fill: #5cc4ff; stroke: #1a5cff; }
.play-button { color: #0b3fb3; }
.tab.active:after { background: var(--blue); height: 3px; border-radius: 3px; }
.filter-chip.active { background: var(--blue); border-color: var(--blue); }
.section-title h3, .workspace-intro h2, .page-heading h1 { color: var(--dark); }

/* 멘토 배너: 레퍼런스 하단 CTA 처럼 블루 그라데이션 */
.mentor-banner { color: #fff; background:
    radial-gradient(60% 120% at 100% 0%, #5cc4ff66, transparent 70%),
    linear-gradient(120deg, #123a8f, #1a5cff 60%, #22a6f2); box-shadow: 0 20px 40px -24px #1a5cffcc; }
.mentor-banner .banner-mark { color: #ffffff8c; }
.mentor-banner p { color: #d6e4ff; }
.mentor-banner .button { background: #fff; color: #0b3fb3; border-color: #fff; }
.mentor-banner .button:hover { background: #eaf3ff; }

/* 푸터: 네이비 */
.site-footer { background: #0b1f4d; border-top-color: #0b1f4d; color: #dbe5fa; }
.footer-brand span { color: var(--lime); }
.site-footer .footer-inner p, .site-footer .footer-links { color: #a9bce4; }
.site-footer .footer-links a:hover { color: #fff; }
.copyright { color: #8193bd; }
.footer-bottom { border-top-color: #ffffff1a; color: #8193bd; }

/* 기타 포인트 */
.tool-button.active { background: #cfe4ff; border-color: #9dbcf5; }
.skip-link { background: #fff; color: var(--blue); }
.notification-button i { background: var(--lime); }
dialog::backdrop { background: #0b1f4dc2; }

/* ── 배경 사진 (RealVisXL 로 로컬 생성, assets/photo/*.webp) ──
   사진은 맨 아래 레이어, 그 위에 블루 그라데이션을 덮어 글자 대비를 지킨다. */
.hero {
  background:
    linear-gradient(90deg, #0b1f4d 0%, #0b1f4de6 30%, #0f2c6c99 50%, #123a8f33 72%, transparent 100%),
    linear-gradient(180deg, #0b1f4d66 0%, transparent 28%, transparent 70%, #0b1f4d99 100%),
    url(../assets/photo/hero.webp) right center / auto 100% no-repeat,
    #0b1f4d;
}
.hero-inner { z-index: 1; }
.hero-art:before { background: radial-gradient(ellipse at 60% 45%, #0b1f4d59, transparent 70%); }

.home-workspace {
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 50%, #f4f8ffe6 75%, #f4f8ffb8 100%),
    url(../assets/photo/city.webp) center bottom / cover no-repeat;
  border-radius: 0 0 28px 28px;
}

.mentor-banner {
  background:
    linear-gradient(90deg, #123a8f 0%, #1a5cffd9 40%, #1a5cff59 66%, transparent 100%),
    url(../assets/photo/dream.webp) right center / auto 100% no-repeat,
    #1a5cff;
  min-height: 150px;
}

.page-heading:has(.about-title) {
  position: relative; isolation: isolate; color: #fff; border-radius: 24px; overflow: hidden;
  padding: clamp(32px, 5vw, 64px); margin-bottom: 40px;
  background:
    linear-gradient(90deg, #0b1f4d 0%, #0b1f4df0 34%, #123a8fa6 62%, #1a5cff33 100%),
    url(../assets/photo/team.webp) right center / auto 100% no-repeat, #0b1f4d;
}
.page-heading:has(.about-title) .about-title { color: #fff; }
.page-heading:has(.about-title) .about-title span { background: linear-gradient(100deg, #8fd8ff, #5cc4ff 50%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-heading:has(.about-title) .about-lead { color: #d6e4ff; }
.page-heading:has(.about-title) .section-kicker { color: #9fd3ff; }

@media (max-width: 580px) {
  .hero { background:
      linear-gradient(180deg, #0b1f4d 0%, #0b1f4d 46%, #0b1f4d99 62%, #123a8f40 80%, #0b1f4dcc 100%),
      url(../assets/photo/hero.webp) 72% bottom / auto 56% no-repeat, #0b1f4d; }
  .mentor-banner { background: linear-gradient(90deg, #123a8f 0%, #1a5cffe6 60%, #1a5cffa6 100%), url(../assets/photo/dream.webp) center / cover no-repeat, #1a5cff; }
}
/* 사진 위 도트 아트는 빛처럼 얹히게 */
.hero-canvas { opacity: .62; mix-blend-mode: screen; }