/* ==========================================================
   Yeo Baek(여백) — 메인 페이지 전용 스타일
   ========================================================== */

/* ---------- ① 첫 화면: 빈 벽 → 그림이 걸린 벽 ---------- */

/* 휴대폰 기본: 그림이 화면 폭에 꽉 차고, 잠시 뒤 액자가 나타난다 */
.intro {
  padding-top: 0; /* 머리말이 숨어 있으니 그림이 화면 맨 위부터 */
}
.intro-sticky { position: relative; }

.intro-frame {
  position: relative;
  container-type: size; /* 글자 크기(cqw)와 위치(cqh)를 그림 크기 기준으로 */
  aspect-ratio: 3000 / 2643;
  overflow: hidden;
  background: #efe6d2;
}
.intro-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
/* 휴대폰 순서: 빈 벽+로고(0s) → 로고 사라짐(0.8s) → 영문 헤드라인 등장(1.0~2.6s) → 액자 채워짐(2.8~4.4s)
   → 약 6초 그대로 감상 → 반짝임 시작(첫 사라짐 약 10.5초) */
.wall-full { animation: fill-wall 1.6s ease 2.8s both; }

/* 액자 반짝임: 채워진 뒤부터 빈 벽 그림이 천천히 겹쳐졌다 빠지기를 반복한다 */
.wall-blink {
  opacity: 0;
  animation: blink-wall 5s ease-in-out 8.8s infinite;
}
@keyframes blink-wall {
  0%, 35%  { opacity: 0; }
  55%, 65% { opacity: 1; }
  85%, 100% { opacity: 0; }
}

/* 빈 벽 위에 얹힌 로고. 액자가 나타나면 사라진다 */
.intro-logo {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 4.6vw; /* 한 줄 로고가 문 위 접시 장식보다 위에 들어오는 크기 */
  top: 4%;
  animation: fade-out .8s ease .8s both;
}

/* 스크롤 안내: 그림 아래 가운데, 화살표가 천천히 오르내린다. 한 번 스크롤하면 사라진다 */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: opacity .4s;
  animation: fill-wall .8s ease 4.6s both; /* 액자가 다 채워진 뒤 나타남 */
}
.scroll-hint-arrow {
  font-size: 18px;
  line-height: 1;
  animation: hint-bob 1.6s ease-in-out infinite;
}
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
.has-scrolled .scroll-hint { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .scroll-hint, .scroll-hint-arrow { animation: none; }
}

@keyframes fill-wall { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out  { from { opacity: 1; } to { opacity: 0; } }

/* PC: 스크롤에 따라 가운데 그림이 화면 전체로 넓어지며 액자가 채워진다.
   JS가 html에 .is-scrolly를 붙이고 --p(0→1), --logo, --title, --fill 값을 넣는다.
   순서: 로고 사라짐 → 영문 헤드라인 등장 → 액자 채워짐 */
.is-scrolly .intro {
  height: 230vh;
  padding-top: 0;
}
.is-scrolly .intro-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
}
.is-scrolly .intro-frame {
  --h0: 60vh;
  --w0: calc(60vh * 1.1351);
  aspect-ratio: auto;
  width:  calc(var(--w0) + (100vw  - var(--w0)) * var(--p, 0));
  height: calc(var(--h0) + (100vh - var(--h0)) * var(--p, 0));
}
.is-scrolly .wall-full { animation: none; opacity: var(--fill, 0); }
/* PC: 액자가 다 채워진 순간(JS가 .is-filled)부터 시간을 재서, 4초 뒤 반짝임 시작(첫 사라짐 약 5.8초 뒤) */
.is-scrolly .wall-blink { animation: none; }
.is-scrolly .intro.is-filled .wall-blink { animation: blink-wall 5s ease-in-out 4s infinite; }
.is-scrolly .intro-logo {
  animation: none;
  opacity: var(--logo, 1);
  top: 4%;
  font-size: calc(60vh * 0.056);
}
.is-scrolly .scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0;
  animation: none;
  opacity: var(--logo, 1);
}

@media (prefers-reduced-motion: reduce) {
  .wall-full { animation: none; opacity: 1; }
  .wall-blink { animation: none; opacity: 0; }
  .intro-logo { animation: none; opacity: 0; }
}

/* ---------- 첫 화면 문구 ---------- */
:root { --hero-gap: clamp(120px, 15vw, 220px); } /* 첫 화면 그림과 국문 문구 사이 */
/* 국문 제목 띠: 어두운 바탕(문의 섹션과 같은 색). .wrap 폭을 넘어 화면 양끝까지 칠한다 (2026-10-04) */
:root { --hero-brown: #2e1f15; } /* 진한 고동색: 그림의 마룻바닥·서랍장 색(#775035)을 어둡게 (2026-10-04) */
.hero-copy {
  padding-top: var(--hero-gap);
  padding-bottom: var(--hero-gap);
  background: var(--hero-brown);
  color: #f3ebe0;
  box-shadow: 0 0 0 100vmax var(--hero-brown);
  clip-path: inset(0 -100vmax);
}
.hero-copy .hero-desc { color: #cdbba6; }
.hero-copy + .process { padding-top: var(--hero-gap); }

/* 헤드라인: 그림 왼쪽 아래(마룻바닥 위)에 두 줄을 모아 얹는다.
   첫 줄은 흰색, 둘째 줄은 강조색(더 크게). 글씨가 잘 읽히도록 아래쪽에 옅은 어둠을 깐다.
   글자 크기는 그림 폭(cqw) 기준이라 PC에서 그림이 커져도 같은 비율. 액자가 채워진 뒤 나타난다 */
.hero-title {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding: 0 4.5cqw 4cqw;
  pointer-events: none;
  background: linear-gradient(to top, rgba(18, 12, 8, .55), rgba(18, 12, 8, 0) 45%);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 6cqw;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: fill-wall .8s ease 1s both; /* 빈 벽 위에 먼저 나타난다 */
}
.hero-title span { display: block; }
.hero-title .on-image,
.hero-title .on-paper { color: #fff; }
/* 두 줄의 가로 길이를 맞춘다: DESERVES ART 기준(1.3em)으로 윗줄을 0.972em
   (실측: EVERY WHITE SPACE 13.08em, DESERVES ART 9.78em → 1.3 × 9.78 / 13.08) */
.hero-title .on-image { font-size: 0.972em; }
.hero-title .on-paper { font-size: 1.3em; }

/* 등장 애니메이션: 줄마다 보이지 않는 선 아래에서 밀려 올라온다 (JS가 .is-shown을 붙임) */
.hero-title .on-image,
.hero-title .on-paper { overflow: hidden; padding-bottom: 0.06em; }
.hero-title .line { display: block; }
.js .hero-title .line {
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(.2, .75, .2, 1);
}
.js .hero-title .on-paper .line { transition-delay: .18s; }
.js .hero-title.is-shown .line { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-title .line { transform: none; transition: none; }
}

.is-scrolly .hero-title { animation: none; opacity: var(--title, 0); }
@media (prefers-reduced-motion: reduce) {
  .hero-title { animation: none; opacity: 1; }
}

.hero-head {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.6vw, 32px); /* 2026-10-04 줄임 (20~40 → 18~32) */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.hero-desc {
  font-family: var(--font-head);
  font-weight: 400;
  margin-top: 12px;
  max-width: 32em;
  font-size: 12px; /* 2026-10-04 줄임 (13 → 12) */
  line-height: 1.6;
}

@media (min-width: 768px) {
  .hero-desc { font-size: 18px; } /* 2026-10-04 줄임 (24 → 18) */
}

/* 국문 제목과 설명: 가운데 정렬 */
.hero-lead {
  text-align: center;
}
.hero-lead .hero-desc { margin-left: auto; margin-right: auto; }

@media (min-width: 900px) {
}

/* ---------- ② 진행 방식 ----------
   왼쪽에 큰 제목, 오른쪽에 소개·밑줄 링크·접었다 펴는 단계 목록(아코디언).
   목록은 <details>로 만들어 키보드·화면낭독기에서도 열고 닫을 수 있다 */
.process {
  padding: var(--section-gap) 0;
  background: var(--paper);
}
.process-grid {
  display: grid;
  gap: 28px;
}
.process-title {
  font-family: var(--font-body);
  font-size: clamp(30px, 4.4vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.process-intro {
  max-width: 24em;
  font-size: 16px;
  line-height: 1.6;
}
.text-link {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.text-link:hover { color: var(--accent); }

.acc { margin-top: 48px; }
.acc-item { border-top: 1px solid #cfcfcf; }
.acc-item:first-child { border-top-color: var(--ink); }
.acc-item:last-child { border-bottom: 1px solid #cfcfcf; }
.acc-item summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-no {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.acc-title {
  flex: 1;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.acc-arrow {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink-soft);
  transition: transform .25s ease;
}
.acc-item[open] .acc-arrow { transform: rotate(180deg); }
.acc-item summary:hover .acc-title { color: var(--accent); }
.acc-body {
  padding: 0 0 22px 32px;
  font-size: 14px;
  line-height: 1.7;
  animation: acc-open .35s ease;
}
.acc-meta {
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
@keyframes acc-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .acc-body { animation: none; }
  .acc-arrow { transition: none; }
}

/* PC: 두 칸 */
@media (min-width: 900px) {
  .process-grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .process-intro { font-size: 19px; }
  .acc { margin-top: 64px; }
  .acc-item summary { padding: 20px 0; }
  .acc-title { font-size: 26px; }
  .acc-body { font-size: 15px; padding-left: 36px; }
}

/* ---------- ③ 여백(餘白)의 의미: 그림 + 항목 두 칸 (공간 / 작가) ---------- */
.hanja { font-family: "Noto Sans KR", var(--font-sans); }
.benefits {
  padding-bottom: var(--section-gap);
  background: var(--paper);
}
.benefit-grid {
  display: grid;
  gap: 72px;
  margin-top: 48px;
}
.benefit-img {
  aspect-ratio: 3 / 2; /* 휴대폰: 가로형으로 짧게 */
  overflow: hidden;
  background: #efe9dd;
}
.benefit-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.benefit:hover .benefit-img img { transform: scale(1.03); }
.benefit-en {
  margin-top: 20px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.benefit h3 {
  margin-top: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.benefit-list li {
  padding: 22px 0; /* 위아래 같은 여백으로 칸 안에서 세로 가운데 */
  border-bottom: 1px solid #e2e2e2;
}
.benefit-list h4 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.benefit-list p {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.js .benefit.reveal:nth-child(2) { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .benefit-img img { transition: none; }
}

@media (min-width: 900px) {
  .benefit-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 56px;
    margin-top: 72px;
  }
  .benefit h3 { font-size: 28px; }
  .benefit-img { aspect-ratio: 4 / 3; } /* PC: 두 칸이라 너무 길지 않게 4:3 */
}

/* ---------- ⑥ 자주 묻는 질문 (진행 방식과 같은 틀, 처음엔 모두 접힘) ---------- */
.faq {
  padding-bottom: var(--section-gap);
  background: var(--paper);
}
.faq .acc { margin-top: 0; }
.faq .acc-title { font-size: 17px; }
@media (min-width: 900px) {
  .faq .acc-title { font-size: 21px; }
}

/* ---------- ⑦ 문의: 어두운 바탕으로 페이지를 마무리 ---------- */
.contact {
  --dk-bg: var(--hero-brown); /* 첫 화면 띠와 같은 진한 고동색 (2026-10-04) */
  --dk-ink: #f3ebe0;
  --dk-soft: #b09c86;
  --dk-line: rgba(255, 255, 255, .18);
  padding-top: calc(var(--section-gap) / 2); /* 2026-10-04 절반으로 */
  background: var(--dk-bg);
  color: var(--dk-ink);
}
.contact-list { border-top: 1px solid var(--dk-ink); }
.contact-list li { border-bottom: 1px solid var(--dk-line); }
.contact-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0;
  transition: color .2s;
}
.contact-label {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.contact-sub {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--dk-soft);
}
.contact-arrow {
  font-family: var(--font-sans);
  font-size: 18px;
  transition: transform .2s;
}
.contact-row:hover { color: #fff; }
/* 이메일: 링크 없이 주소만 보여준다 (2026-10-04) */
.contact-row.is-text:hover { color: inherit; }
.contact-mail {
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0;
  user-select: all;
}
.contact-row:hover .contact-arrow { transform: translateX(6px); }
.contact-note {
  margin-top: 28px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dk-soft);
}

/* 꼬리말 */
.contact .site-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: var(--section-gap);
  padding-top: 28px;
  padding-bottom: 40px;
  border-top: 1px solid var(--dk-line);
  color: var(--dk-soft);
}
.footer-logo { font-size: 18px; color: var(--dk-ink); }
.contact .site-footer small { font-family: var(--font-sans); font-size: 12px; }

@media (min-width: 900px) {
  .contact-label { font-size: 28px; }
  .contact-row { padding: 28px 0; }
  .contact-sub { font-size: 13px; }
}

/* 휴대폰: 그림 아래 'Scroll' 안내 칸도 어두운 띠와 이어지게 (2026-10-04) */
@media (max-width: 899px) {
  .has-scrolled .intro { background: var(--hero-brown); }
  /* 위쪽은 Scroll 안내 칸(약 55px)까지 어두워 보이므로, 아래도 그만큼 더해 위아래 어두운 여백을 맞춘다 */
  .hero-copy { padding-bottom: calc(var(--hero-gap) + 55px); }
}

/* 첫 화면 아래 어두운 국문 띠: 처음엔 숨겨 두고, 한 번 스크롤하면 천천히 나타난다 (2026-10-04) */
.js .hero-copy { opacity: 0; transition: opacity .9s ease; }
.js.has-scrolled .hero-copy { opacity: 1; }
.intro { transition: background-color .9s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-copy { opacity: 1; transition: none; }
}