/* ==========================================================================
   앱 포트폴리오 — Pico CSS 위에 얹는 최소한의 스타일
   - 색·간격·카드·버튼은 Pico 변수(--pico-*)를 그대로 사용합니다.
   - 여기서는 브랜드 포인트 색과 카드/스크린샷 배치만 정의합니다.
   ========================================================================== */

:root {
  --portfolio-brand: #ff6347;                    /* 사이트 포인트 색 (다른 앱들과 동일) */
  --portfolio-brand-soft: rgba(255, 99, 71, .14);
  --portfolio-radius: 1rem;

  /* 한글 본문 글꼴 (Pico 가 쓰는 변수를 바꾸면 폼·버튼까지 함께 적용됩니다) */
  --pico-font-family: "Noto Sans KR", "NanumSquare", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pico-font-family-sans-serif: var(--pico-font-family);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

body {
  font-family: var(--pico-font-family);
  /* 화면 위쪽에만 은은한 색 번짐 (다른 앱들의 그라디언트 톤과 맞춤) */
  background-image:
    radial-gradient(70rem 32rem at 12% -10%, rgba(255, 99, 71, .16), transparent 62%),
    radial-gradient(60rem 30rem at 92% -8%, rgba(124, 92, 255, .18), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.container {
  max-width: 1100px;
  /* Pico 는 576px 이상에서 .container 의 좌우 여백을 0 으로 만들고 max-width 로만 중앙
     정렬합니다. max-width 를 1100px 로 고정하면 576~1100px 구간에서 본문이 화면 끝에
     붙어 버리므로 좌우 여백은 모든 폭에서 유지합니다. */
  padding-right: var(--pico-spacing);
  padding-left: var(--pico-spacing);
}

.muted {
  color: var(--pico-muted-color);
}

/* 상단 내비게이션 ------------------------------------------------------- */
.portfolio-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;                    /* 좁은 화면에서 메뉴가 아래 줄로 내려가도록 */
  row-gap: .1rem;
  margin-bottom: var(--pico-spacing);
  background-color: var(--pico-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.portfolio-nav ul {
  flex-wrap: wrap;
}

.portfolio-nav a {
  text-decoration: none;
}

.portfolio-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.portfolio-nav .brand i {
  color: var(--portfolio-brand);
}

.portfolio-nav .theme-toggle {
  margin: 0;
  padding: .3rem .6rem;
  line-height: 1;
}

/* 첫 화면(히어로) ------------------------------------------------------- */
.hero {
  padding: 1.5rem 0 1rem;
}

.eyebrow {
  margin: 0 0 .4rem;
  color: var(--portfolio-brand);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hero h1 {
  margin-bottom: .6rem;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  letter-spacing: -.02em;
}

/* Pico 의 <mark> 는 강조색 배경이라 큼직한 제목에서는 무거워서 브랜드 톤으로 바꿉니다 */
.hero mark {
  padding: 0 .3rem;
  border-radius: .5rem;
  background-color: var(--portfolio-brand-soft);
  color: var(--portfolio-brand);
}

.hero .lede {
  max-width: 56ch;
  color: var(--pico-muted-color);
  font-size: 1.04rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .4rem 0 1.3rem;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.hero-links a {
  margin: 0;
}

/* 배지(칩) ------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .6rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 999px;
  background-color: var(--pico-card-sectioning-background-color);
  color: var(--pico-muted-color);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.badge i {
  font-size: .85em;
}

.badge.accent {
  border-color: transparent;
  background-color: var(--portfolio-brand-soft);
  color: var(--portfolio-brand);
}

.badge.solid {
  border-color: transparent;
  background-color: var(--portfolio-brand);
  color: #fff;
}

/* 앱 카드 --------------------------------------------------------------- */
.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.app-card {
  --accent: var(--portfolio-brand);
  margin: 0;
  border-radius: var(--portfolio-radius);
  transition: transform .15s ease, border-color .15s ease;
}

.app-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.app-card > header {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.app-card > header img {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
  border-radius: .95rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}

.app-card h3 {
  margin: 0;
  font-size: 1.08rem;
}

.app-sub {
  margin: 0;
  color: var(--pico-muted-color);
  font-size: .78rem;
}

.app-card > p {
  color: var(--pico-muted-color);
  font-size: .92rem;
}

.app-card > footer {
  text-align: left;
}

.app-card > footer a {
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
}

/* 앱 소개(상세) --------------------------------------------------------- */
.details {
  margin-top: 3rem;
}

article.detail {
  scroll-margin-top: 4.5rem;
  border-radius: var(--portfolio-radius);
}

.detail > header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.detail > header img {
  width: 4rem;
  height: 4rem;
  flex: 0 0 auto;
  border-radius: 1.15rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.detail > header h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 .3rem;
}

.detail > header p {
  margin: 0;
  color: var(--pico-muted-color);
}

.detail h4 {
  margin-bottom: .5rem;
  color: var(--portfolio-brand);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.detail .grid {
  margin-top: 1rem;
}

.features ul {
  padding-left: 1.1rem;
}

.features li {
  margin-bottom: .3rem;
  font-size: .94rem;
}

.features li::marker {
  color: var(--portfolio-brand);
}

.spec table {
  font-size: .88rem;
}

.spec th {
  width: 7rem;
  color: var(--pico-muted-color);
  font-weight: 600;
  vertical-align: top;
}

.spec td {
  vertical-align: top;
}

/* 긴 값(패키지명·웹 주소 등)이 좁은 화면에서 옆으로 넘치지 않도록 줄바꿈 허용 */
.spec th,
.spec td {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.25rem;
}

.detail-actions a {
  margin: 0;
}

/* 스크린샷 ------------------------------------------------------------- */
.shots-label {
  margin: 1.5rem 0 .5rem;
  color: var(--pico-muted-color);
  font-size: .82rem;
}

.shots {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  margin: 0;
  padding-bottom: .6rem;
  scroll-snap-type: x proximity;
}

.shots img {
  width: 10rem;
  height: auto;
  flex: 0 0 auto;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: .85rem;
  background-color: var(--pico-card-sectioning-background-color);
  scroll-snap-align: start;
}

.feature {
  width: 100%;
  height: auto;
  margin: .25rem 0 0;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: .85rem;
}

/* 기술 스택 ------------------------------------------------------------- */
.stack {
  margin-top: 3rem;
}

.stack article h3 {
  font-size: 1.05rem;
}

.stack article h3 i {
  margin-right: .4rem;
  color: var(--portfolio-brand);
}

.stack li {
  margin-bottom: .3rem;
  font-size: .92rem;
}

/* 하단 ------------------------------------------------------------------ */
.site-footer {
  margin-top: 3rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--pico-muted-border-color);
  color: var(--pico-muted-color);
  font-size: .88rem;
}

.site-footer p {
  margin-bottom: .35rem;
}

/* 작은 화면 ------------------------------------------------------------- */
@media (max-width: 576px) {
  .detail > header {
    align-items: flex-start;
  }
}

@media (max-width: 420px) {

  /* 320px 안팎에서는 스펙 표가 화면보다 넓어지지 않도록 여백·글자를 줄입니다 */
  .spec table {
    font-size: .82rem;
  }

  .spec th {
    width: 4.4rem;
  }

  .spec th,
  .spec td {
    padding: .5rem .4rem;
  }

  .shots img {
    width: 8.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .app-card {
    transition: none;
  }
}