/* ==========================================================================
   사이트 전역 다듬기(polish) - 모든 페이지에서 기존 CSS "뒤에" 불러온다.

   페이지마다 CSS 가 따로라(index/my/detail/profile/create/login) 같은 다듬기를
   각 파일에 흩어 넣으면 반드시 서로 어긋난다. 그래서 겹쳐 얹는 한 장으로 만들고,
   기존 규칙은 건드리지 않는다 - 여기서는 그림자·전환·초점·빈 화면만 다룬다.

   아이콘·일러스트는 전부 인라인 SVG(data URI)다. 외부 이미지 CDN 을 쓰면 그
   서버가 느릴 때 화면이 같이 늦어지고 CSP 허용 목록도 늘려야 한다.
   ========================================================================== */

:root {
  --pl-lift-shadow: 0 12px 28px rgba(29, 53, 87, 0.13);
  --pl-ring: 0 0 0 3px rgba(230, 57, 70, 0.28);
}

/* ── 글자 선택·스크롤바 - 작지만 사이트 전체의 인상을 정리한다 ── */
::selection {
  background: rgba(230, 57, 70, 0.18);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #d4d9e0 transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #d4d9e0;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #b9c1cc; }
*::-webkit-scrollbar-track { background: transparent; }

html { scroll-behavior: smooth; }

/* ── 카드류 - 페이지마다 이름이 달라 여기서 한 번에 묶는다 ── */
.card,
.challenge-item,
.challenge-card,
.submission-card,
.rating-item,
.preview-card,
.notice-item {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover,
.challenge-item:hover,
.challenge-card:hover,
.submission-card:hover,
.rating-item:hover,
.notice-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--pl-lift-shadow);
}

/* ── 버튼 - 눌리는 감각을 준다 ── */
button,
.hero-btn,
a[class*="btn"] {
  transition: transform 0.12s ease, box-shadow 0.18s ease,
              background-color 0.18s ease, opacity 0.18s ease;
}

button:active,
.hero-btn:active,
a[class*="btn"]:active {
  transform: scale(0.97);
}

/* 키보드 사용자에게 지금 어디에 있는지 보여준다. 마우스 클릭에는 안 뜬다. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--pl-ring);
  border-radius: 6px;
}

/* ── 입력칸 - 초점이 부드럽게 들어온다 ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #e63946;
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12);
}

/* ── 빈 화면 - 비어 있는 동그라미였던 자리에 깃발 일러스트를 채운다 ── */
.empty-state-icon {
  background-color: #fde8ea;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56%;
  /* 산 위의 깃발 - 도전 서비스의 "아직 아무것도 없음" */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M14 52 30 24l8 12 6-8 8 24z' fill='%23f4a2a9'/%3E%3Cpath d='M30 10v26' stroke='%231d3557' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M30 10h16l-5 6 5 6H30z' fill='%23e63946'/%3E%3Ccircle cx='50' cy='14' r='3' fill='%23ffb703'/%3E%3C/svg%3E");
}

/* ── 히어로(라운지) - 제목 강조를 그라디언트 글자로, 배지는 떠 있게 ── */
.hero-title-accent {
  background: linear-gradient(120deg, #ffd166, #ffb703 55%, #ff8e3c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffb703; /* 미지원 브라우저 대비 */
}

.hero-badge {
  animation: pl-float 3.4s ease-in-out infinite;
}

@keyframes pl-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ── 로그인 - 배경을 사이트 상징색 계열로 맞춘다.
      기존 보라 그라디언트는 이 사이트 어디에도 없는 색이었다. ── */
body:has(.login-modal) {
  background: linear-gradient(135deg, #e63946 0%, #a4133c 45%, #1d3557 100%);
}

/* ── 스크롤 리빌 - polish.js 가 다룬다.
      JS 가 없으면(또는 IO 미지원이면) 클래스가 안 붙어 전부 그대로 보인다. ── */
html.pl-io .pl-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

html.pl-io .pl-reveal.pl-in {
  opacity: 1;
  transform: none;
}

/* ── 움직임을 줄여 달라는 설정을 그대로 따른다 ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .card, .challenge-item, .challenge-card, .submission-card,
  .rating-item, .notice-item, button, .hero-btn, a[class*="btn"] {
    transition: none;
  }

  .card:hover, .challenge-item:hover, .challenge-card:hover,
  .submission-card:hover, .rating-item:hover, .notice-item:hover {
    transform: none;
  }

  .hero-badge { animation: none; }

  html.pl-io .pl-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── 프로필의 "받은 평가 없음" - 글자 한 줄이던 자리에 별 일러스트 ── */
.no-ratings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 2.2rem 0 !important;
}

.no-ratings::before {
  content: "";
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: #fdf6dd;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8l7 14 16 2-11.6 11 2.8 15.6L32 43l-14.2 7.6L20.6 35 9 24l16-2z' fill='%23ffb703' stroke='%23e0a000' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='53' cy='12' r='3' fill='%23f4a2a9'/%3E%3Ccircle cx='10' cy='46' r='2.5' fill='%23a8dadc'/%3E%3C/svg%3E");
}


/* ── 헤더 로고 마크 - 글자뿐이던 로고 앞에 심벌을 단다.
      마크는 아이콘과 같은 원본에서 나온 것이라 어디서 봐도 같은 로고다. ── */
.logo {
  gap: 9px;
}

.logo::before {
  content: "";
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cdefs%3E %3ClinearGradient id='bg' x1='0' y1='0' x2='1' y2='1'%3E %3Cstop offset='0' stop-color='%23ef4453'/%3E %3Cstop offset='1' stop-color='%23a4133c'/%3E %3C/linearGradient%3E %3C/defs%3E %3Crect width='512' height='512' rx='116' fill='url(%23bg)'/%3E %3Cpath d='M118 400 L258 194 L338 310 L390 240 L462 400 Z' fill='%23ffffff' opacity='0.34'/%3E %3Cpath d='M62 400 L216 172 L370 400 Z' fill='%23ffffff'/%3E %3Cpath d='M216 172 V84' stroke='%231d3557' stroke-width='16' stroke-linecap='round'/%3E %3Cpath d='M224 84 h86 l-26 27 26 27 h-86 z' fill='%23ffb703'/%3E %3Cpath d='M404 96 l7 18 18 7 -18 7 -7 18 -7 -18 -18 -7 18 -7 z' fill='%23ffffff' opacity='0.9'/%3E %3C/svg%3E");
}