/*
 * 관리자 데이터를 붙이면서 새로 필요해진 것만 담았습니다.
 * 글(INSIGHTS)과 포트폴리오가 함께 씁니다.
 *
 * 원본 디자인의 규칙은 하나도 고치지 않았습니다.
 * 여기 있는 것은 원본에 없던 세 가지뿐입니다.
 *   1. 썸네일 이미지 채우기 (원본에서는 빈 회색 상자였음)
 *   2. 썸네일이 없을 때 놓는 옅은 로고
 *   3. 페이지네이션 / 글이 없을 때 안내
 *
 * 색과 글꼴은 모두 원본이 정의한 CSS 변수를 그대로 씁니다.
 */

/* ── 1. 썸네일 자리 ─────────────────────────────────────── */
/* 안쪽 내용을 자리에 맞추기 위해 기준점만 잡습니다. 크기·비율·배경은 원본 그대로입니다. */
.post-feature__thumb,
.post-card__thumb,
.project-card__thumb,
.card__thumb,
.article__cover,
.device-browser__screen {
  position: relative;
  overflow: hidden;
}

.thumb__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 2. 썸네일이 없을 때 ────────────────────────────────── */
/*
 * 원본의 빈 회색 상자(--c-fill)를 그대로 두고,
 * 그 위에 회사 로고를 옅게 얹어 배경 질감처럼 보이게 합니다.
 * 비율(16:9)과 크기는 원본 상자를 그대로 따릅니다.
 *
 * 심볼만으로는 알아보기 어려워 아래에 워드마크를 함께 놓습니다.
 * 두 이미지 모두 height: auto 라서 원본 비율(심볼 68:24, 워드마크 200:13)이
 * 그대로 유지됩니다. 찌그러지지 않습니다.
 */
.thumb__logo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0.18;
}

.thumb__logo-mark {
  width: 14%;
  height: auto;
}

.thumb__logo-wordmark {
  width: 30%;
  height: auto;
}

/* 카드가 작아지면 워드마크 글자가 뭉개지므로 심볼만 남깁니다. */
@media (max-width: 768px) {
  .thumb__logo-wordmark {
    display: none;
  }
}

/* ── 3. 카드 떠오름 (마우스 올림 / 키보드 포커스) ───────── */
/*
 * 카드가 링크(<a>)가 되면서 공통 규칙 a:hover { opacity: 0.6 } 이 걸려
 * 썸네일뿐 아니라 제목·요약까지 카드 전체가 흐려졌습니다.
 * 그 흐려짐을 끄고, 카드가 통째로 살짝 떠오르게 바꿉니다.
 *
 * 값과 이징은 새로 만들지 않고 사이트에 이미 있는
 *   .device-phone:hover / .device-browser:hover (page-index.css)
 * 의 것을 그대로 가져왔습니다. 떠오르는 높이만 -4px 입니다.
 *
 * 적용 대상
 *   .post-card / .post-feature   블로그 목록 (밝은 배경)
 *   #insights .card              메인 INSIGHTS 섹션 (밝은 배경)
 *   .project-card                포트폴리오 목록 (밝은 배경)
 *   #projects .card              메인 PROJECTS 섹션 (어두운 배경)
 */
.post-feature,
.post-card,
.project-card,
#insights .card,
#projects .card {
  transition: opacity 220ms linear, transform 320ms var(--ease-std), box-shadow 320ms var(--ease-std);
}

.post-feature:hover,
.post-feature:focus-visible,
.post-card:hover,
.post-card:focus-visible,
.project-card:hover,
.project-card:focus-visible,
#insights .card:hover,
#insights .card:focus-visible,
#projects .card:hover,
#projects .card:focus-visible {
  opacity: 1;
  transform: translateY(-4px);
}

/* 썸네일이 혼자 움직이면 카드가 어긋나 보이므로, 카드와 함께 움직이고 그림자만 받습니다. */
.post-feature__thumb,
.post-card__thumb,
.project-card__thumb,
#insights .card__thumb,
#projects .card__thumb {
  transition: transform 320ms var(--ease-std), box-shadow 320ms var(--ease-std);
}

/* 밝은 배경 위: 원본 .device-phone:hover 의 그림자를 그대로 씁니다. */
.post-feature:hover .post-feature__thumb,
.post-feature:focus-visible .post-feature__thumb,
.post-card:hover .post-card__thumb,
.post-card:focus-visible .post-card__thumb,
.project-card:hover .project-card__thumb,
.project-card:focus-visible .project-card__thumb,
#insights .card:hover .card__thumb,
#insights .card:focus-visible .card__thumb {
  transform: none;
  box-shadow: 0 26px 56px rgba(15,15,14,0.14), 0 3px 10px rgba(15,15,14,0.07);
}

/*
 * 어두운 배경 위(#projects):
 * 원본 그림자색 rgba(15,15,14,...) 는 어두운 배경 --c-dark-bg(#0F0F0E) 와
 * RGB 가 완전히 같아서 겹쳐도 보이지 않습니다. 그래서 이 영역만 값을 따로 잡습니다.
 * 형태(번짐·위치)는 밝은 배경과 똑같이 두고 색만 바꿉니다.
 *   · 검정 그림자로 깊이를 주고
 *   · 밝은 색 0.5px 테두리로 카드 경계를 세웁니다 (사이트가 쓰는 0.5px 선과 같은 두께)
 */
#projects .card:hover .card__thumb,
#projects .card:focus-visible .card__thumb {
  transform: none;
  box-shadow: 0 26px 56px rgba(0,0,0,0.55), 0 3px 10px rgba(0,0,0,0.40), 0 0 0 0.5px rgba(241,241,241,0.14);
}

/* ── 4. 페이지네이션과 빈 목록 ──────────────────────────── */
.post-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-s);
  margin-top: 96px;
}

/* .btn-round 는 원본에 있는 버튼 모양입니다. <a> 로 쓸 때만 가운데 정렬을 맞춰줍니다. */
.post-pagination .btn-round {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.post-pagination .btn-round[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.post-pagination__status {
  font-size: var(--fs-caption);
  color: var(--c-text-mute);
  min-width: 72px;
  text-align: center;
}

.post-empty {
  padding: 96px 0;
  text-align: center;
  font-size: var(--fs-body);
  color: var(--c-text-mute);
}

/* ── 5. 페이지 첫 섹션의 위쪽 여백 ──────────────────────── */
/*
 * 하위 페이지의 첫 섹션은 헤더와의 사이가 너무 넓었습니다.
 * 원본은 --pad-top(200px) 을 쓰는데, 이 변수는 다른 곳에서도 쓰이므로 건드리지 않고
 * '첫 번째 섹션'에만 위쪽 여백을 다시 잡습니다. 아래쪽 여백과 좌우 여백은 그대로입니다.
 *
 * 대상  .page-head   /insights, /projects, /privacy 의 첫 섹션
 *       .article     블로그·프로젝트 상세 페이지의 첫 섹션
 *
 * 메인 페이지의 첫 섹션은 .hero 라서 여기에 걸리지 않습니다. (100vh 구조라 그대로 둡니다)
 */
section.page-head:first-of-type,
section.article:first-of-type {
  padding-top: 120px;
}

@media (max-width: 1024px) {
  section.page-head:first-of-type,
  section.article:first-of-type {
    padding-top: 80px;
  }
}

@media (max-width: 768px) {
  section.page-head:first-of-type,
  section.article:first-of-type {
    padding-top: 56px;
  }
}

/* ── 6. 문의 폼 ─────────────────────────────────────────── */
/*
 * 원본 폼 마크업은 그대로 두고, 원본에 없던 세 가지만 더합니다.
 *   · 접수 완료 / 오류 알림
 *   · 항목별 오류 문구
 *   · 자동 프로그램만 채우는 숨김 칸(허니팟)
 */
.form-alert {
  border-radius: var(--r-card, 6px);
  padding: var(--gap-s, 16px) var(--gap-m, 24px);
  font-size: 15px;
  line-height: 1.6;
}

.form-alert--ok {
  border: 0.5px solid var(--c-brand, #0016D5);
  color: var(--c-brand, #0016D5);
}

.form-alert--error {
  border: 0.5px solid #B3261E;
  color: #B3261E;
}

.field__error {
  font-size: var(--fs-caption, 14px);
  line-height: 1.5;
  color: #B3261E;
}

/*
 * 허니팟.
 * display: none 은 일부 자동 프로그램이 걸러내므로, 화면 밖으로 밀어 보이지 않게 합니다.
 * aria-hidden 과 tabindex="-1" 을 함께 두어 스크린리더와 키보드에서도 닿지 않습니다.
 */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── 한글 줄바꿈 ────────────────────────────────────────── */
/*
 * 한글은 기본적으로 글자 단위로 줄이 바뀝니다.
 * 그래서 "만듭니다" 처럼 짧은 낱말의 마지막 한 글자만 다음 줄로 떨어지곤 합니다.
 *
 * word-break: keep-all 을 주면 낱말 중간에서 끊지 않고 띄어쓰기에서만 줄을 바꿉니다.
 * 낱말 하나가 화면보다 긴 예외적인 경우에는 overflow-wrap 이 받아줍니다.
 */
.section-title,
.section-sub,
.page-title,
.page-sub,
.hero__sub,
.card__title,
.card__desc,
.post-feature__title,
.post-feature__summary,
.post-card__title,
.post-card__summary,
.project-card__title,
.project-card__desc,
.article__title,
.article__lead,
.modal__title,
.modal__overview,
.work-item__name,
.work-item__desc,
.policy-section__title,
.prose h2,
.prose h3 {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 시작 화면(인트로 커튼) ─────────────────────────────── */
/*
 * 커튼은 기본적으로 감춰두고, intro.js 가 돌기 시작할 때만 띄웁니다.
 * 이렇게 해두면 자바스크립트가 없거나 오류가 나도
 * 검은 화면이 사이트를 영영 가리는 일이 생기지 않습니다.
 */
.intro-curtain:not([data-active="1"]) {
  display: none;
}

/* 아무 곳이나 눌러 건너뛸 수 있다는 것을 알려줍니다. */
.intro-curtain {
  cursor: pointer;
}

/*
 * 좁은 화면에서는 글자가 화면을 넘칩니다.
 * (원본 40px + 자간 0.1em 이면 14글자가 약 390px 를 넘어섭니다)
 * 화면 폭에 맞춰 줄이고 좌우에 여백을 남깁니다.
 */
@media (max-width: 768px) {
  .intro-curtain {
    padding: 0 20px;
  }

  .intro-curtain__text {
    font-size: min(40px, 7vw);   /* 14글자 * 0.7em ≈ 화면 폭의 70% */
    white-space: nowrap;
  }
}

/*
 * 지도.
 * 상자 크기(폭 100% · 높이 360px · 모서리 6px)는 원본 .contact-map 그대로 두고,
 * 그 안을 iframe 이 채우게만 합니다. 모서리 밖으로 삐져나오지 않도록 잘라냅니다.
 */
.contact-map {
  overflow: hidden;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 전송 중에는 버튼을 눌러도 반응하지 않는다는 것을 보여줍니다. */
.contact-form button[disabled] {
  opacity: 0.55;
  cursor: default;
}

/*
 * 문의 결과 모달.
 *
 * 프로젝트 모달과 같은 껍데기(.modal / .modal__panel)를 쓰되,
 * 글 두어 줄만 들어가는 창이라 작게 만듭니다.
 * 프로젝트 모달은 이미지와 본문이 들어가므로 지금 크기가 맞습니다. 건드리지 않습니다.
 *
 * 선택자를 두 겹(.modal__panel.modal__panel--message)으로 쓴 이유:
 * project-modal.css 가 이 파일보다 나중에 로드되기 때문에,
 * 한 겹으로 두면 원본의 .modal__panel { width: 1080px } 에 밀립니다.
 */
.modal__panel.modal__panel--message {
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 480px;
  max-height: none;
}

.modal__panel--message .modal__body {
  padding: 40px;
  gap: 20px;
}

.modal__panel--message .modal__title {
  font-size: 24px;
}

/* ── 7. 프로젝트 모달의 이미지와 스크롤 ─────────────────── */
/*
 * 원본 모달은 이미지 자리에 기기 목업(.device-browser)을 두었지만,
 * 웹사이트 화면은 세로로 길어 프레임에 넣으면 잘립니다.
 * 그래서 프레임 없이 원본 비율 그대로 넣고, 세로로 이어 붙입니다.
 * (.modal__media 는 원본이 이미 세로 방향 flex 라 그대로 씁니다)
 */
.modal__image,
.project-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-card, 6px);
}

/*
 * 스크롤은 모달 하나만 씁니다.
 * .modal__panel 은 원본부터 overflow-y: auto 인 스크롤 상자였고,
 * 여기서는 최대 높이만 90vh 로 잡습니다.
 * 오른쪽 글 영역은 sticky 로 붙여, 왼쪽 이미지가 흐르는 동안 화면에 머무릅니다.
 */
.modal__panel {
  max-height: 90vh;
}

.modal__body {
  position: sticky;
  top: 0;
  align-self: start;
}

/* 한 칸으로 접히는 폭에서는 글이 이미지 위를 덮으므로 붙이지 않습니다. */
@media (max-width: 1024px) {
  .modal__body {
    position: static;
  }
}

/* 상세 페이지의 화면 이미지 사이 간격 */
.project-image + .project-image {
  margin-top: var(--gap-m, 24px);
}

/* ───────────────────────────────────────────────────────
 * 스크립트가 없거나 실패했을 때
 *
 * 원본은 스크롤에 맞춰 나타나는 요소들을 opacity: 0 으로 시작시키고,
 * 화면에 들어오면 .is-visible 을 붙여 채웁니다.
 * 그 스크립트가 막히면(차단·오류·구형 브라우저) 내용이 영영 안 보입니다.
 *
 * <head> 맨 위에서 <html> 에 .js 를 붙이므로,
 * 클래스가 없다는 것은 곧 스크립트가 실행되지 않았다는 뜻입니다.
 * 그때는 나타난 뒤의 상태(.is-visible)와 같은 값으로 되돌립니다.
 *
 * 원본 page-index.css 는 그대로 두고 이 파일이 나중에 덮어씁니다.
 * ─────────────────────────────────────────────────────── */

html:not(.js) [data-reveal] .section-label,
html:not(.js) [data-reveal] .section-title,
html:not(.js) [data-reveal] .section-sub,
html:not(.js) .reveal-card,
html:not(.js) .process-stage > * {
  opacity: 1;
  transform: none;
}

/* 섹션 이름 옆의 짧은 선도 그려진 상태로 */
html:not(.js) [data-reveal] .section-label__line {
  width: 48px;
  margin-right: var(--gap-s);
}

/*
 * 히어로는 CSS 애니메이션이라 스크립트 없이도 스스로 나타납니다.
 * 다만 그 지연(2.2~3초)은 인트로 커튼이 걷히는 시각에 맞춘 값인데,
 * 스크립트가 없으면 커튼 자체가 안 뜨므로 기다릴 이유가 없습니다.
 */
html:not(.js) .hero__line,
html:not(.js) .hero__sub,
html:not(.js) .hero__scroll {
  animation-delay: 0s;
}

/* ───────────────────────────────────────────────────────
 * 사이트 방문하기 버튼
 *
 * 원본의 .btn-primary 를 그대로 쓰고 색만 바꿉니다.
 * 크기·모서리는 페이지마다 조금씩 다른데(목록 16px, 상세 15px)
 * 이렇게 하면 어느 화면에서든 옆에 있는 버튼과 저절로 맞습니다.
 * ─────────────────────────────────────────────────────── */

.btn-primary.btn-primary--outline {
  background: transparent;
  color: var(--c-text);
  /* 테두리(border)를 쓰면 버튼이 1px 커져 옆 버튼과 어긋납니다.
     안쪽 그림자로 그리면 크기가 그대로입니다. */
  box-shadow: inset 0 0 0 0.5px var(--c-line-strong);
}

.btn-primary.btn-primary--outline:hover,
.btn-primary.btn-primary--outline:focus-visible {
  background: var(--c-text);
  color: #FFFFFF;
}

/* 버튼 두 개를 한 덩어리로 묶습니다. 오른쪽의 '목록으로'·화살표는 그대로 둡니다. */
.actions-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-s);
}

/*
 * 눈에는 안 보이지만 화면 낭독기는 읽는 글자.
 * '새 창에서 열림' 처럼 시각적으로는 아이콘이나 맥락으로 알 수 있지만
 * 낭독기 사용자에게는 알려줘야 하는 내용에 씁니다.
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * 감춘 이미지는 감춰져 있어야 합니다.
 *
 * site.css 의 img { display: block } 이 브라우저 기본값인
 * [hidden] { display: none } 을 덮어써서, hidden 을 붙여도 그대로 보였습니다.
 * (OUR SERVICE 의 '모두의 예약' 로고가 IT 프로젝트 탭에서도 남아 있던 이유입니다.
 *  원본도 같은 문제를 겪어서 .service-mockups[hidden] 을 따로 적어 두었는데,
 *  이미지에는 그 처리가 빠져 있었습니다)
 */
img[hidden] {
  display: none;
}

/* 비공개 글을 관리자가 열었을 때만 보이는 안내 */
.preview-flag {
  border: 0.5px solid var(--c-line-strong);
  border-radius: var(--r-card);
  background: var(--c-fill-soft);
  padding: var(--gap-s) var(--gap-m);
  font-size: var(--fs-caption);
  color: var(--c-text-sub);
}