/* ============================================
   Jane — Portfolio
   꼬또네 COTONE BI 팔레트
     메인  #7a97ab  "꼬또네 블루" (Pantone 5425 C)
     서브  #ffffff · #555555
   폰트: Pretendard (국문/본문) · Classico계 (영문 대제목)
   ============================================ */

:root {
  /* 브랜드 정본 컬러 */
  --brand:      #7a97ab;   /* 꼬또네 블루 — 절대 변경 금지 */
  --brand-soft: #eef3f6;   /* 블루 5% 틴트 (파생) */

  /* 텍스트 */
  --ink:    #333333;
  --body:   #555555;       /* BI 서브 컬러 */
  --muted:  #6e7478;
  --accent: #7a97ab;       /* 포인트 = 메인 컬러로 통일 */
  --brand-deep: #5a7d92;   /* 링크 hover 용 (블루 계열 유지) */

  /* 면 */
  --bg:      #ffffff;      /* BI 서브 컬러 */
  --surface: #f8fafb;
  --line:    #e2eaef;

  --radius: 14px;
  --max:    46rem;

  --font-kr: "Pretendard Variable", Pretendard, system-ui, -apple-system,
             "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-en: "URW Classico", Optima, Candara, "Palatino Linotype",
             "Pretendard Variable", Pretendard, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand:      #7a97ab;
    --brand-soft: #26313a;

    --ink:    #e8edf0;
    --body:   #c3cbd0;
    --muted:  #98a3aa;
    --accent: #7a97ab;
    --brand-deep: #a8c2d1;

    --bg:      #1b2126;
    --surface: #222b32;
    --line:    #2f3a42;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-kr);
  font-size: 16px;
  font-weight: 300;          /* Pretendard Light — BI 본문 스펙 */
  line-height: 1.8;
  letter-spacing: 0;
  word-break: keep-all;      /* 한글 줄바꿈을 어절 단위로 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
}

/* ───── Hero ───── */

.hero { padding-bottom: 3rem; }

.eyebrow {
  margin: 0 0 1.25rem;
  font-size: 0.75rem;    /* 12px */
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--accent);
}

.name {
  margin: 0;
  font-family: var(--font-en);
  font-size: clamp(2.75rem, 12vw, 4.25rem);
  font-weight: 400;          /* Classico Regular — BI 대제목 스펙 */
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ink);
}

.name .dot { color: var(--brand); }

.role {
  margin: 0.9rem 0 0;
  font-size: clamp(1.05rem, 4vw, 1.2rem);
  font-weight: 600;          /* Pretendard Semibold — 국문 대제목 스펙 */
  letter-spacing: 0;
  color: var(--ink);
}

/* ───── Section ───── */

.section {
  padding: 2.75rem 0;
  border-top: 1px solid var(--line);
}

.section-title {
  margin: 0 0 1.75rem;
  font-size: 0.75rem;    /* 12px */
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--brand);
}

/* ───── 하는 일 ───── */

.work-group {
  display: grid;
  gap: 0.75rem;
}

/* 구분선 없이 여백만으로 묶음을 나눕니다 */
.work-group + .work-group { margin-top: 1.5rem; }

@media (min-width: 40rem) {
  .work-group {
    grid-template-columns: 3.75rem 1fr;
    gap: 1.5rem;
  }
}

.group-title {
  margin: 0;
  font-size: 0.875rem;   /* 14px */
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brand);
}

.work-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.work-items li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-size: 0.875rem;   /* 14px */
  font-weight: 500;
  line-height: 1.4;
}

/* 반짝임 아이콘 */
.work-items li::before {
  content: "✦";
  font-size: 0.85em;
  opacity: 0.65;
}

/* 묶음마다 꼬또네 블루의 농도를 한 단계씩 — 색상은 하나, 농도만 다름 */
.work-group:nth-of-type(1) { --pill-bg: #b9cfda; --pill-ink: #2c4d5f; }
.work-group:nth-of-type(2) { --pill-bg: #cfdfe7; --pill-ink: #35586b; }
.work-group:nth-of-type(3) { --pill-bg: #e0eaf0; --pill-ink: #3d6376; }
.work-group:nth-of-type(4) { --pill-bg: #edf3f6; --pill-ink: #456d81; }

@media (prefers-color-scheme: dark) {
  .work-group:nth-of-type(1) { --pill-bg: #3f5866; --pill-ink: #e0ecf2; }
  .work-group:nth-of-type(2) { --pill-bg: #364a57; --pill-ink: #d3e3ec; }
  .work-group:nth-of-type(3) { --pill-bg: #2e404b; --pill-ink: #c6d9e3; }
  .work-group:nth-of-type(4) { --pill-bg: #27343d; --pill-ink: #bacfda; }
}

/* ───── 브랜드 카드 ───── */

.business-lede {
  margin: 0 0 1.75rem;
  color: var(--body);
  font-size: 0.875rem;   /* 14px */
  line-height: 1.9;
}

/* 카페델꼬또네 — BI 메인 #caac80은 '포인트' 컬러라 카드 전체에 깔지 않습니다.
   카드는 중립 차콜로 두고, 브라운은 이 카드에서 쓰지 않습니다.
   [BI 원본: 메인 #caac80 · 서브 #f4f3eb(아이보리) / #222222 — 브랜드-로고-가이드 위키] */
.brand--cafe {
  --brand:      #3a3f43;   /* 차콜 — 상단 라인 · 영문 서브타이틀 */
  --brand-soft: #eceef0;   /* 태그 배경 — 뉴트럴 그레이 */
  --accent:     #3a3f43;   /* 태그 글씨 — 배경 대비 8.9:1 */
  --brand-deep: #1f2326;   /* 링크 hover — 한 단계 더 진하게 */
  --muted:      #6f7376;   /* 본문 — 차콜과 같은 정도로만 쿨하게 (파랑 치우침 7) */
  --surface:    #f9fafa;   /* 뉴트럴 — 꼬또네 카드와 명도(L* 98) 맞춤 */
  --line:       #e6e8ea;   /* 테두리도 뉴트럴 + 꼬또네 선과 명도(L* 92) 맞춤 */
}

@media (prefers-color-scheme: dark) {
  .brand--cafe {
    --brand:      #b9c0c4;   /* 어두운 바탕에서는 차콜을 뒤집어 밝은 그레이로 */
    --brand-soft: #2b3238;
    --accent:     #b9c0c4;
    --brand-deep: #dfe4e7;
    --muted:      #9ba2a6;   /* 본문 — 꼬또네 블루기를 뺌 (파랑 치우침 18 → 11) */
    --surface:    #262b2f;
    --line:       #343a3e;
  }
}

.brand + .brand { margin-top: 1rem; }

.brand {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.5rem;
}

.brand-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.brand-head h3 {
  margin: 0;
  font-size: 1.1875rem;  /* 19px */
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}

.brand-en {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-en);
  font-size: 0.75rem;    /* 12px */
  font-weight: 400;
  letter-spacing: 0;
  color: var(--brand);
}

.tag {
  flex-shrink: 0;
  padding: 0.2rem 0.65rem;
  background: var(--brand-soft);
  border-radius: 999px;
  font-size: 0.6875rem;  /* 11px */
  color: var(--accent);
  white-space: nowrap;
}

.brand > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;   /* 14px */
}

.brand-links {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 0.8125rem;  /* 13px */
}

/* 현재 미사용 — 브랜드 카드에 항목 리스트를 다시 넣을 때 사용 */
.brand-points {
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.brand-points li {
  position: relative;
  padding-left: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.brand-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

/* ───── 연락처 ───── */

.contact-lede {
  margin: -0.5rem 0 1.5rem;
  color: var(--muted);
  font-size: 0.94rem;
}

.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contact-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border-bottom: none;          /* 기본 링크 밑줄 해제 */
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-size: 0.8125rem;         /* 13px */
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.contact-list a:hover,
.contact-list a:focus-visible {
  background: var(--pill-bg-hover);
  color: var(--pill-ink);
}

.contact-list .label {
  min-width: 0;
  font-size: 0.6875rem;         /* 11px */
  color: inherit;
  opacity: 0.65;
}

#contact {
  --pill-bg:       #edf3f6;   /* 시스템 묶음과 같은 가장 옅은 단계 */
  --pill-ink:      #456d81;
  --pill-bg-hover: #dde9ef;
}

@media (prefers-color-scheme: dark) {
  #contact {
    --pill-bg:       #27343d;
    --pill-ink:      #bacfda;
    --pill-bg-hover: #31414c;
  }
}

a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid var(--brand);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover,
a:focus-visible { color: var(--brand-deep); }

a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ───── Footer ───── */

.footer {
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
}

.footer p { margin: 0; }

/* ───── 등장 애니메이션 ───── */

@media (prefers-reduced-motion: no-preference) {
  .hero, .section, .footer { animation: rise 0.6s ease both; }
  .section:nth-of-type(1) { animation-delay: 0.06s; }
  .section:nth-of-type(2) { animation-delay: 0.12s; }
  .section:nth-of-type(3) { animation-delay: 0.18s; }
  .footer                 { animation-delay: 0.24s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}