/* =========================================================
   공용 스타일시트 — 모든 페이지(홈 · 처리방침 · 404, 한/영)가 함께 쓴다.
   페이지별 스타일은 16번 섹션(.legal, .not-found)에만 둔다.
   ========================================================= */

/* ============ 1. 폰트 ============ */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('/PretendardVariable-1.3.9.woff2') format('woff2-variations');
}

/* ============ 2. 색 · 크기 토큰 ============ */
:root {
  --bg: #f0ede8;
  --bg2: #e6e1da;
  --text: #2a2520;
  --text-muted: #686058;
  --card-bg: #f7f4f0;

  /* nav: 본문 배경보다 살짝 밝게 띄우고 경계선을 강화 */
  --nav-bg: rgba(250,248,245,0.82);
  --nav-border: rgba(90,75,60,0.18);

  --border: rgba(90,75,60,0.1);

  /* --danger: bg2 위 4.97:1 / card 위 5.90:1 (AA 통과) */
  --danger: #b91c1c;
  /* --focus: 반대 테마의 --bg 값을 그대로 쓴다.
     라이트 모드 → 다크 테마의 --bg(#1a1a1a). bg 14.9 / bg2 13.38 / card 15.87 */
  --focus: #1a1a1a;

  /* 곡률 규칙 — 누르는 것은 캡슐, 입력하는 것과 면은 squircle.
       버튼  → border-radius: 99px + superellipse(1.2)
       인풋·면 → 아래 반경 스케일 + squircle
     이 스케일 밖의 값은 쓰지 않는다. */
  --radius-lg: 26px;   /* 카드 · 모달 · 처리방침 섹션 */
  --radius-md: 20px;   /* 인풋 · 텍스트에리아 · 파일 선택 */
  --radius-sm: 14px;   /* 중첩 박스 */
  --radius-xs: 6px;    /* 체크박스 */
  --transition: 0.35s cubic-bezier(0.4,0,0.2,1);

  /* 타입 스케일 — 이 밖의 크기는 쓰지 않는다.
     작은 글자는 11 / 12 / 14 / 15px 네 단계뿐이다. 그 사이 값(12.5, 13.1,
     13.6 …)은 눈으로 구분되지 않으면서 코드만 어지럽히므로 만들지 말 것. */
  --fs-hero: clamp(3.5rem, 10vw, 9rem);
  --fs-h2:   clamp(1.8rem, 4vw, 3rem);
  --fs-h3:   clamp(1.375rem, 2.6vw, 2rem);
  --fs-body: clamp(1rem, 1.3vw, 1.125rem);
  --fs-lg:   1.125rem;    /* 18px — 로고 · 카드 제목 */
  --fs-md:   0.9375rem;   /* 15px — 모바일 메뉴 · 닫기 버튼 */
  --fs-sm:   0.875rem;    /* 14px — 보조 텍스트 · 입력칸 · 버튼 */
  --fs-xs:   0.75rem;     /* 12px — 라벨 · 캡션 · 표 */
  --fs-2xs:  0.6875rem;   /* 11px — 아주 작은 라벨 */
}
[data-theme="dark"] {
  --bg: #1a1a1a;
  --bg2: #242424;
  --text: #e8e0d5;
  --text-muted: #a8a098;
  --card-bg: #222222;

  --nav-bg: rgba(32,32,32,0.88);
  --nav-border: rgba(255,245,235,0.14);

  --border: rgba(255,245,235,0.08);

  /* bg2 위 5.61:1 / card 위 5.75:1 */
  --danger: #f87171;
  /* 다크 모드 → 라이트 테마의 --bg(#f0ede8). bg 14.9 / bg2 13.29 / card 13.62 */
  --focus: #f0ede8;
}

/* ============ 3. 리셋 · 베이스 ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* 모바일 탭 하이라이트 제거 (카드 전체를 덮는 .card-open 이 파랗게 번쩍이지 않도록) */
a, button, label { -webkit-tap-highlight-color: transparent; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* CSP 때문에 마크업에 style= 을 쓸 수 없어서 쓰는 초기 숨김 */
.is-hidden { display: none; }

/* 본문 바로가기 — 포커스될 때만 보인다 */
.skip-link {
  position: absolute; left: 50%; top: 0; translate: -50% -120%;
  z-index: 300;
  padding: 0.7rem 1.25rem;
  background: var(--card-bg); color: var(--text);
  border: 1.5px solid var(--text); border-radius: 99px;
  font-size: var(--fs-sm); font-weight: 600;
  transition: translate 0.2s;
}
.skip-link:focus-visible { translate: -50% 12px; }

/* ============ 4. 연속 곡률 (iOS 스타일 squircle) ============
   corner-shape는 border-radius와 함께 동작하므로 반경 값은 그대로 두고
   곡선의 질감만 바꾼다. 미지원 브라우저는 기존 원호 코너로 자연 폴백.

   형태 언어는 역할로 나눈다:
   - 누르는 것(버튼·링크 칩) → radius:99px 캡슐 + superellipse(1.2)
     squircle을 캡슐에 걸면 실루엣이 사각형으로 변해 "둥근 정도"까지
     바뀌므로, 캡슐은 실루엣을 유지하는 최소 곡률만 적용한다.
   - 입력하는 것(인풋·체크박스)과 면(카드·모달·섹션) → 반경 스케일 + squircle

   새 요소를 추가할 때도 이 두 갈래 중 하나에 반드시 넣을 것.
   여기 빠뜨리면 같은 반경인데 혼자 원호로 남아 곡률이 갈린다.
   ============================================================ */
@supports (corner-shape: squircle) {
  /* 면과 입력 컨트롤 → squircle */
  .card,
  .modal,
  .detail-modal,
  .legal .section,
  .legal .contact-box,
  .contact-form input,
  .contact-form textarea,
  .form-field input,
  .form-field textarea,
  .file-upload-btn,
  .consent-check {
    corner-shape: squircle;
  }

  /* 누르는 것(캡슐, radius:99px) → 실루엣이 사각형으로 변하지 않을 만큼만 */
  .btn-contact,
  .btn-submit-contact,
  .btn-back,
  .btn-admin,
  .btn-lang,
  .btn-edit,
  .btn-delete,
  .btn-add-project,
  .btn-cancel,
  .btn-submit,
  .skip-link,
  .scroll-cue,
  .btn-theme::before {
    corner-shape: superellipse(1.2);
  }
}

/* ============ 5. 포커스 표시 ============ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.form-field input:focus-visible,
.form-field textarea:focus-visible { outline-offset: 1px; }

/* ============ 6. 내비게이션 ============ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  height: 64px;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nav-border);
  transition: background var(--transition), border-color var(--transition);
}
.nav-logo {
  font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.03em;
  cursor: pointer; transition: opacity 0.2s;
}
.nav-logo:hover { opacity: 0.6; }
.nav-links { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 2rem); }
.nav-links a {
  position: relative;
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.02em;
  color: var(--text-muted); transition: color 0.2s;
  padding: 0.35rem 0;
}
.nav-links a:hover { color: var(--text); }
/* 현재 보고 있는 섹션 표시 */
.nav-links a.is-active { color: var(--text); }
.nav-links a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--text); border-radius: 2px;
}
.nav-back {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted);
  display: flex; align-items: center; gap: 0.4rem; transition: color 0.2s;
}
.nav-back:hover { color: var(--text); }

/* 햄버거 버튼 — 시각 크기는 유지하고 터치 영역만 44×44 */
.btn-hamburger {
  display: none;
  justify-content: center; align-items: center;
  width: 44px; height: 44px;
  background: transparent; border: none; cursor: pointer; padding: 0;
  -webkit-appearance: none; appearance: none;
  position: relative;
}
.btn-hamburger::before,
.btn-hamburger::after,
.btn-hamburger .bar {
  display: block; position: absolute;
  width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: all 0.3s;
  left: 50%; transform: translateX(-50%);
}
.btn-hamburger::before { content: ''; top: 50%; margin-top: -8px; }
.btn-hamburger .bar    { top: 50%; margin-top: -1px; }
.btn-hamburger::after  { content: ''; top: 50%; margin-top: 6px; }
.btn-hamburger.open::before { margin-top: -1px; transform: translateX(-50%) rotate(45deg); }
.btn-hamburger.open .bar    { opacity: 0; }
.btn-hamburger.open::after  { margin-top: -1px; transform: translateX(-50%) rotate(-45deg); }

/* ============ 7. 모바일 메뉴 ============ */
.mobile-menu {
  display: flex; flex-direction: column;
  position: fixed; top: 64px; left: 0; right: 0; z-index: 99;
  background: var(--nav-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nav-border);
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  gap: 0.25rem;
  max-height: 0; overflow: hidden;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition:
    max-height 0.35s cubic-bezier(0.4,0,0.2,1),
    opacity 0.25s ease,
    padding 0.35s cubic-bezier(0.4,0,0.2,1),
    visibility 0s linear 0.35s,
    background var(--transition);
}
.mobile-menu.open {
  max-height: 340px; opacity: 1;
  pointer-events: auto; visibility: visible;
  padding: 1rem clamp(1.5rem, 5vw, 4rem) 1.25rem;
  transition:
    max-height 0.35s cubic-bezier(0.4,0,0.2,1),
    opacity 0.25s ease,
    padding 0.35s cubic-bezier(0.4,0,0.2,1),
    visibility 0s linear 0s,
    background var(--transition);
}
.mobile-menu a {
  font-size: var(--fs-md); font-weight: 500;
  color: var(--text-muted); padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu a:hover,
.mobile-menu a.is-active { color: var(--text); }
/* 관리자 버튼과 테마 토글을 한 덩어리로 묶는다 */
.mobile-menu-btns {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 0.75rem; padding-top: 0.75rem;
}

/* ============ 8. 버튼 ============ */
.btn-admin {
  position: relative;
  font-size: var(--fs-xs); font-weight: 600;
  padding: 0.45rem 0.9rem; border-radius: 99px;
  border: 1.5px solid var(--border);
  background: transparent; color: var(--text-muted);
  cursor: pointer; transition: all 0.2s;
  font-family: inherit;
}
.btn-admin:hover { border-color: var(--text); color: var(--text); }
.admin-active .btn-admin { border-color: var(--text-muted); color: var(--text); }
.admin-active .btn-admin:hover { opacity: 0.6; }

/* 언어 전환 (EN / KO). a 태그라 .nav-links a · .mobile-menu a 를 이기도록 a.btn-lang 로 쓴다 */
a.btn-lang {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em;
  padding: 0.45rem 0.8rem; border-radius: 99px;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  transition: border-color 0.2s, color 0.2s;
}
a.btn-lang:hover { border-color: var(--text); color: var(--text); }

/* 테마 토글 — 트랙(38×22)과 손잡이(16px)는 그대로,
   버튼 자체를 44×44 투명 박스로 만들어 터치 영역만 넓힌다 */
.btn-theme {
  width: 44px; height: 44px;
  border: none; background: transparent; padding: 0;
  position: relative; cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.btn-theme::before {
  content: ''; width: 38px; height: 22px; border-radius: 99px;
  background: var(--border); transition: background 0.3s;
}
.btn-theme:hover::before { opacity: 0.75; }
.btn-theme::after {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text);
  top: 50%; margin-top: -8px;
  left: 50%; margin-left: -16px;
  transition: transform 0.3s, background 0.3s;
}
[data-theme="dark"] .btn-theme::after { transform: translateX(16px); }

.btn-contact {
  position: relative;   /* 모바일 히트 영역 확장(::after)의 기준 */
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.4rem; border-radius: 99px;
  font-size: var(--fs-sm); font-weight: 600; font-family: inherit;
  border: 1.5px solid var(--border); background: var(--card-bg);
  color: var(--text); cursor: pointer;
  transition: all 0.2s; white-space: nowrap; width: fit-content;
}
.btn-contact:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-contact svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 1.4rem; border-radius: 99px;
  border: 1.5px solid var(--border); background: var(--card-bg);
  color: var(--text); font-size: var(--fs-sm); font-weight: 600;
  transition: all 0.2s;
}
.btn-back:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

/* 히트 영역만 44×44로 확장하는 공용 처리 (시각 크기는 그대로) */
.btn-admin::after,
.btn-lang::after,
.detail-close::after,
.btn-edit::after,
.btn-delete::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(100%, 44px); height: max(100%, 44px);
}

/* ============ 9. 히어로 ============ */
section { padding: clamp(4.5rem, 9vw, 7rem) clamp(1.5rem, 5vw, 4rem); }

/* 메뉴로 이동했을 때 섹션 윗부분이 고정 내비(64px) 밑에 깔리지 않도록 */
#about, #portfolio, #contact { scroll-margin-top: 80px; }

#hero {
  min-height: 92vh;
  min-height: 92dvh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: calc(64px + clamp(2rem, 6vw, 4rem)) clamp(1.5rem, 5vw, 4rem) clamp(4.5rem, 9vh, 6.5rem);
  position: relative; overflow: hidden; text-align: center;
}
.hero-tag {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.25rem;
}
.hero-name {
  font-size: var(--fs-hero);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-bottom: 2.25rem;
}
.hero-name span { display: block; }
.hero-name .sub {
  font-size: clamp(2.2rem, 6.5vw, 6rem);
  font-weight: 500; color: var(--text-muted); margin-top: 0.15em;
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* 아래에 더 있다는 스크롤 유도 */
.scroll-cue {
  position: absolute; left: 50%; translate: -50% 0;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.9rem; border-radius: 99px;
  color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; border: none; font-family: inherit; cursor: pointer;
  transition: color 0.2s, opacity 0.3s;
}
.scroll-cue:hover { color: var(--text); }
.scroll-cue svg { width: 16px; height: 16px; animation: cue-bob 2s ease-in-out infinite; }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ============ 10. 소개 ============ */
#about { background: var(--bg2); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.stack-center {
  display: flex; flex-direction: column;
  align-items: center; gap: clamp(1.75rem, 3.5vw, 3rem);
  text-align: center; max-width: 720px; margin: 0 auto;
}
.section-heading {
  font-size: var(--fs-h2);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.1;
  text-align: center; word-break: keep-all;
}
.section-heading .slash { color: var(--text-muted); font-weight: 300; }
/* 한글 약 34자 폭. ch 는 숫자 폭 기준이라 한글에는 너무 좁게 잡힌다 */
.about-text { max-width: 34em; }
.about-text p {
  font-size: var(--fs-body);
  line-height: 1.7; color: var(--text-muted); margin-bottom: 0.75rem;
  font-weight: 400; text-align: center; word-break: keep-all;
}
.about-text p:last-child { margin-bottom: 0; }

/* ============ 11. 포트폴리오 ============ */
#portfolio { padding-block: clamp(4.5rem, 9vw, 7rem); }
.portfolio-header {
  display: flex; justify-content: center; align-items: center;
  margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; flex-direction: column;
}
.btn-add-project {
  display: none; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.25rem; border-radius: 99px;
  font-size: var(--fs-sm); font-weight: 600; font-family: inherit;
  border: none; background: var(--text); color: var(--bg);
  cursor: pointer; transition: opacity 0.2s;
}
.btn-add-project:hover { opacity: 0.75; }
.admin-active .btn-add-project { display: inline-flex; }

/* auto-fit + 상한 360px 이라 카드가 1개든 5개든 가운데 정렬된다 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 360px));
  justify-content: center;
  gap: 1.5rem;
  max-width: 1200px; margin-inline: auto;
}
.card {
  background: var(--card-bg); border-radius: var(--radius-lg);
  overflow: hidden; position: relative; cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  transition: transform var(--transition), box-shadow var(--transition);
  aspect-ratio: 4/3; width: 100%;
}
.card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,0.15); }
.card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.04em;
  color: var(--text-muted);
}
.card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.5) 45%,
    rgba(0,0,0,0.1) 75%,
    transparent 100%
  );
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem;
  opacity: 0.5; transition: opacity var(--transition);
}
/* 카드를 덮는 투명 버튼 — 클릭·키보드로 상세를 여는 실제 컨트롤 */
.card-open {
  position: absolute; inset: 0; z-index: 5;
  border: none; background: transparent; padding: 0;
  cursor: pointer; font: inherit; color: inherit;
}
.card:hover .card-overlay,
.card:has(.card-open:focus-visible) .card-overlay { opacity: 1; }
.card-open:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
/* 호버가 없는 터치 기기에서는 제목이 항상 또렷하게 */
@media (hover: none) {
  .card-overlay { opacity: 1; }
}
.card-title {
  font-size: var(--fs-lg); font-weight: 600; color: #fff; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}
.card-cat { font-size: var(--fs-xs); color: rgba(255,255,255,0.7); margin-top: 0.25rem; font-weight: 400; }
/* 관리자 전용: 오른쪽 위 수정·삭제 버튼, 왼쪽 위 번역 누락 표시 */
.card-actions {
  display: none; position: absolute; top: 10px; right: 10px; z-index: 10;
  gap: 0.4rem;
}
.admin-active .card-actions { display: flex; }
.btn-edit,
.btn-delete {
  position: relative;
  border: none; border-radius: 99px;
  padding: 0.35rem 0.75rem; font-size: var(--fs-xs); font-weight: 700;
  cursor: pointer; font-family: inherit; transition: opacity 0.2s;
}
.btn-edit { background: rgba(255,255,255,0.92); color: #1a1a1a; }
.btn-delete { background: var(--danger); color: #fff; }
.btn-edit:hover,
.btn-delete:hover { opacity: 0.8; }
.card-badge {
  display: none; position: absolute; top: 10px; left: 10px; z-index: 10;
  padding: 0.3rem 0.65rem; border-radius: 99px;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: var(--fs-2xs); font-weight: 600;
  pointer-events: none;
}
.admin-active .card-badge { display: block; }

.admin-msg {
  text-align: center; font-size: var(--fs-sm); color: var(--danger);
  margin: -1.5rem 0 1.5rem; word-break: keep-all;
}
.admin-msg:empty { display: none; }

.grid-msg {
  text-align: center; padding: 3rem;
  font-size: var(--fs-sm); color: var(--text-muted);
  grid-column: 1 / -1; word-break: keep-all;
}
.grid-msg--error { color: var(--danger); }

/* ============ 12. 연락 ============ */
#contact { background: var(--bg2); padding-block: clamp(4rem, 8vw, 6rem); }
.contact-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
  width: 100%; max-width: 520px; margin: 0 auto;
}
.contact-links {
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 0.75rem; align-items: center; justify-content: center;
}
.contact-divider { width: 100%; height: 1px; background: var(--border); }
.contact-form { width: 100%; display: flex; flex-direction: column; gap: 0.85rem; }
.contact-form input,
.contact-form textarea {
  width: 100%; padding: 0.85rem 1.1rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--card-bg); color: var(--text);
  font-family: inherit; font-size: var(--fs-sm);
  resize: none;
  transition: border-color 0.2s, background 0.2s;
}
/* 세로로 긴 칸은 같은 반경이면 각져 보여서 한 단계 큰 반경을 쓴다 */
.contact-form textarea { border-radius: var(--radius-lg); }

.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--text); }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-muted); }

.hp-field { display: none !important; }

.consent-row {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  min-height: 44px;
}
.consent-wrap {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;
  cursor: pointer; user-select: none;
  padding-block: 0.6rem;
}
.consent-wrap input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.consent-check {
  width: 15px; height: 15px; min-width: 15px; min-height: 15px; flex-shrink: 0;
  border: 1.5px solid var(--text-muted); border-radius: var(--radius-xs); background: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.consent-wrap:hover .consent-check { border-color: var(--text); }
.consent-wrap input[type="checkbox"]:checked + .consent-check {
  background: var(--text); border-color: var(--text);
}
.consent-wrap input[type="checkbox"]:checked + .consent-check::after {
  content: ''; display: block; width: 4px; height: 7px;
  border: 1.5px solid var(--bg); border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}
.consent-wrap input[type="checkbox"]:focus-visible + .consent-check {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.consent-link {
  font-size: var(--fs-xs); color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.2s; cursor: pointer;
}
.consent-link:hover { color: var(--text); }

.btn-submit-contact {
  align-self: center;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 2rem; border-radius: 99px;
  border: none; background: var(--text); color: var(--bg);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; transition: opacity 0.2s; margin-top: 0.25rem;
}
.btn-submit-contact:hover { opacity: 0.72; }
.btn-submit-contact:disabled { opacity: 0.35; cursor: not-allowed; }
.contact-success {
  display: none; text-align: center;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-muted); padding: 0.75rem; word-break: keep-all;
}
/* 긴 문구도 잘리지 않도록 고정 높이 대신 최소 높이 */
.contact-msg {
  min-height: 1.25rem;
  text-align: center; font-size: var(--fs-sm); color: var(--danger);
  line-height: 1.4; word-break: keep-all;
}

/* ============ 13. 푸터 ============ */
footer {
  padding: 3rem clamp(1.5rem, 5vw, 4rem) 2rem;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
/* 아래 두 줄(0.75rem)과 확실히 구분되도록 이름만 키운다 */
.footer-name {
  font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -0.03em;
  color: var(--text); margin-bottom: 0.75rem;
}
.footer-privacy { font-size: var(--fs-xs); color: var(--text); font-weight: 400; margin-bottom: 0.5rem; }
.footer-privacy a {
  color: var(--text); text-decoration: underline;
  text-underline-offset: 3px; transition: color 0.2s;
}
.footer-privacy a:hover { color: var(--text-muted); }
.footer-copy { font-size: var(--fs-xs); color: var(--text); font-weight: 400; }

/* ============ 14. 모달 ============
   짧은 뷰포트에서도 버튼까지 도달할 수 있도록
   백드롭이 스크롤되고 모달 자체도 내부 스크롤을 갖는다.
   (margin:auto 로 중앙 정렬하면 넘칠 때 위쪽이 잘리지 않는다)
   ================================================ */
.modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.25rem;
}
.modal-backdrop.open { display: flex; }
.modal {
  margin: auto;
  background: var(--card-bg); border-radius: var(--radius-lg);
  padding: 2.5rem; width: min(480px, 100%);
  max-height: 90dvh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
}
.modal h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 1.5rem; }

.form-field { margin-bottom: 1rem; }
.form-field label {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.4rem;
}
.form-field input, .form-field textarea {
  width: 100%; padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg2); color: var(--text);
  font-family: inherit; font-size: var(--fs-sm);
  transition: border-color 0.2s; resize: vertical;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--text); }
.field-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 0.35rem; }
.form-field .remove-image {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.6rem 0 0; cursor: pointer;
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0; text-transform: none;
}
.form-field .remove-image input { width: auto; padding: 0; margin: 0; accent-color: var(--text); }
.modal-btns { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }
.btn-cancel {
  padding: 0.6rem 1.2rem; border-radius: 99px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text); font-family: inherit; font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-cancel:hover { background: var(--bg2); border-color: var(--text); }
.btn-submit {
  padding: 0.6rem 1.2rem; border-radius: 99px;
  border: none; background: var(--text); color: var(--bg);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; transition: opacity 0.2s;
}
.btn-submit:hover { opacity: 0.75; }
.error-msg {
  color: var(--danger); font-size: var(--fs-xs); margin-top: 0.5rem;
  display: none; line-height: 1.45; word-break: keep-all;
}

/* 파일 업로드 */
.file-upload-wrap { position: relative; }
.file-upload-wrap input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.file-upload-btn {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.65rem 0.9rem;
  border: 1.5px dashed var(--border); border-radius: var(--radius-md);
  background: var(--bg2); color: var(--text-muted);
  font-family: inherit; font-size: var(--fs-sm); cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.file-upload-wrap:hover .file-upload-btn { border-color: var(--text); color: var(--text); }
.file-upload-wrap input[type="file"]:focus-visible + .file-upload-btn {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.file-upload-btn svg { flex-shrink: 0; }
/* 긴 파일명이 버튼 밖으로 삐져나오지 않도록 (flex 안에서는 min-width:0 필요) */
.file-name {
  min-width: 0; flex: 1;
  font-size: var(--fs-sm); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 상세 모달 — 이미지는 고정, 본문만 스크롤해서 닫기 버튼이 항상 보이게 */
.detail-modal {
  margin: auto;
  background: var(--card-bg); border-radius: var(--radius-lg);
  width: min(560px, 100%); max-height: 90dvh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  overflow: hidden; position: relative;
  transform: scale(0.92); opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34,1.4,0.64,1), opacity 0.2s ease;
  will-change: transform, opacity;
}
.modal-backdrop.open .detail-modal.visible { transform: scale(1); opacity: 1; }
.detail-modal.closing {
  transition: transform 0.18s cubic-bezier(0.4,0,1,1), opacity 0.15s ease-in !important;
}
.detail-img-wrap {
  width: 100%; aspect-ratio: 16/9; overflow: hidden;
  background: var(--bg2); flex: 0 0 auto;
}
.detail-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; letter-spacing: -0.04em;
  color: var(--text-muted); text-align: center; padding: 1rem;
  word-break: keep-all;
}
.detail-body { padding: 1.75rem 2rem 2rem; overflow-y: auto; }
.detail-cat {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;
}
.detail-title {
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.2; margin-bottom: 1rem; word-break: keep-all;
}
.detail-desc {
  font-size: var(--fs-sm); line-height: 1.7; color: var(--text-muted);
  word-break: keep-all; white-space: pre-wrap;
}
.detail-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.45);
  color: #fff; font-size: var(--fs-md); line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; z-index: 10;
}
.detail-close:hover { background: rgba(0,0,0,0.7); }

/* ============ 15. 등장 애니메이션 ============
   .js(<head> 인라인 스크립트가 붙임)가 있을 때만 숨긴다.
   JS가 꺼졌거나 로딩에 실패하면 내용이 그냥 다 보인다. */
.reveal {
  transition: opacity 0.85s cubic-bezier(0.4,0,0.2,1),
              transform 0.85s cubic-bezier(0.4,0,0.2,1);
}
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: 0.1s; }

/* ============ 16. 개인정보 처리방침 페이지 ============ */
.legal { max-width: 620px; margin: 0 auto; padding: 110px clamp(1.5rem, 5vw, 2rem) 80px; }
.legal .page-label {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.75rem;
}
.legal h1 {
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.04em;
  line-height: 1.1; margin-bottom: 0.5rem; word-break: keep-all;
}
.legal .updated { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 2rem; }
.legal .section {
  margin-bottom: 1.25rem; padding: 1.5rem 1.75rem;
  background: var(--card-bg); border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.legal .section h2 {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.85rem;
}
.legal .section p { font-size: var(--fs-sm); line-height: 1.7; color: var(--text); word-break: keep-all; }
.legal .section .sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 0.65rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: 0.6rem; }
.legal table th {
  text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
  padding: 0 1rem 0.5rem 0; border-bottom: 1px solid var(--border);
}
.legal table td {
  padding: 0.65rem 1rem 0.65rem 0; border-bottom: 1px solid var(--border);
  line-height: 1.6; vertical-align: top; word-break: keep-all;
  font-size: var(--fs-sm);
}
.legal table tr:last-child td { border-bottom: none; }
.legal table td:first-child { color: var(--text-muted); font-size: var(--fs-xs); }
.legal table:not(.table-transfer) th:nth-child(1),
.legal table:not(.table-transfer) td:nth-child(1) { width: 30%; }
.legal table:not(.table-transfer) th:nth-child(2),
.legal table:not(.table-transfer) td:nth-child(2) { width: 40%; }
.legal table:not(.table-transfer) th:nth-child(3),
.legal table:not(.table-transfer) td:nth-child(3) { width: 30%; }
.legal .table-transfer th:nth-child(1), .legal .table-transfer td:nth-child(1) { width: 20%; }
.legal .table-transfer th:nth-child(2), .legal .table-transfer td:nth-child(2) { width: 10%; }
.legal .table-transfer th:nth-child(3), .legal .table-transfer td:nth-child(3) { width: 28%; }
.legal .table-transfer th:nth-child(4), .legal .table-transfer td:nth-child(4) { width: 42%; }
.legal .contact-box {
  margin-top: 0.85rem; padding: 0.9rem 1.1rem;
  background: var(--bg2); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--text-muted);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.legal .contact-box strong { color: var(--text); font-weight: 600; }
.legal .agencies { margin-top: 0.85rem; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.8; }
.legal .back-row { text-align: center; padding: 2rem 0 0; }
.legal .translation-note {
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6;
  margin: -1.25rem 0 2rem;
}
.legal .translation-note a { text-decoration: underline; text-underline-offset: 3px; }
.legal .translation-note a:hover { color: var(--text); }

.not-found {
  min-height: 70vh; min-height: 70dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center;
  padding: 110px clamp(1.5rem, 5vw, 2rem) 80px;
}
.not-found .page-label {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; color: var(--text-muted);
}
.not-found h1 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; word-break: keep-all; }
.not-found p { font-size: var(--fs-body); color: var(--text-muted); word-break: keep-all; margin-bottom: 1rem; }

/* ============ 17. 반응형 ============ */
/* 중간 구간 — 데스크톱 내비가 좁아지기 시작하는 폭에서 미리 조인다 */
@media (max-width: 900px) {
  .nav-links { gap: 0.9rem; }
  .nav-links a { font-size: var(--fs-xs); }
  .btn-admin { padding: 0.35rem 0.7rem; }
}
@media (max-width: 768px) {
  /* 햄버거 메뉴가 있는 홈에서만 데스크톱 항목을 감춘다 (.has-menu 없는 페이지는 그대로) */
  .nav-links.has-menu > a,
  .nav-links.has-menu > .btn-admin,
  .nav-links.has-menu > .btn-theme { display: none; }
  .btn-hamburger { display: flex; }
  .nav-links.has-menu { gap: 0.25rem; }
  .mobile-menu .btn-admin { display: inline-flex; }
  .mobile-menu .btn-theme { display: grid; }
  /* iOS Safari 는 글자가 16px 미만인 입력칸을 탭하면 화면을 확대해 버린다.
     모바일에서만 16px 로 올려 그 확대를 막는다. */
  .contact-form input, .contact-form textarea,
  .form-field input, .form-field textarea { font-size: 16px; }

  .stack-center { gap: 1.75rem; }
  /* 모바일에서 이름을 더 크게 */
  .hero-name { font-size: clamp(3.2rem, 15vw, 5.5rem); }
  .hero-name .sub { font-size: clamp(2.1rem, 10vw, 3.6rem); }
  .section-heading { font-size: clamp(1.5rem, 6vw, 2.2rem); }
}
@media (max-width: 640px) {
  .cards-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 360px)); }
}
@media (max-width: 480px) {
  section { padding: 4rem 1.25rem; }
  /* 세로로 쌓고, 버튼 폭은 각자 글씨 길이에 맞춘다 */
  .hero-btns, .contact-links {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.6rem; width: 100%;
  }
  .hero-btns .btn-contact,
  .contact-links .btn-contact {
    width: fit-content; justify-content: center;
    padding: 0.5rem 1.1rem;
  }
  /* 보이는 크기는 줄었지만 실제 터치 영역은 44×44 이상 유지 */
  .btn-contact::after {
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: max(100%, 44px);
  }
  .modal { padding: 1.75rem 1.5rem; }
  .detail-body { padding: 1.5rem 1.5rem 1.75rem; }
}
@media (max-width: 500px) {
  .legal .section { padding: 1.25rem; }
  .legal table thead { display: none; }
  .legal table, .legal tbody { display: block; width: 100%; }
  .legal table tr {
    display: flex; flex-direction: column;
    border-bottom: 1px solid var(--border); padding: 0.75rem 0; gap: 0.25rem;
  }
  .legal table tr:last-child { border-bottom: none; }
  .legal table td {
    display: block; width: 100%; padding: 0; border-bottom: none;
    font-size: var(--fs-sm); line-height: 1.5; color: var(--text);
  }
  .legal table td::before {
    content: attr(data-label); display: block;
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.15rem;
  }
}

/* ============ 18. 모션 최소화 ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .detail-modal { transform: none !important; }
  .modal-backdrop.open .detail-modal { opacity: 1 !important; }
  .scroll-cue svg { animation: none !important; }
  .card:hover { transform: none; }
}