html { scroll-behavior: smooth; }
body { font-family: "Pretendard Variable", -apple-system, sans-serif; }
img { max-width: 100%; height: auto; }

/* 에디토리얼 사진 — 프레임/그림자 없이 풀블리드로, 캡션은 사진 아래 얇은 텍스트 */
.photo-frame img { display: block; }
.photo-frame figcaption, .photo-frame .frame-caption { padding-top: 0.6rem; font-size: 0.85rem; color: #6b5d4f; }

.prose-story p { margin-bottom: 1.2rem; line-height: 1.85; }
.prose-story figure { margin: 2rem 0; }
.prose-story figcaption { font-size: 0.85rem; color: #6b5d4f; margin-top: 0.5rem; }
.prose-story table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.prose-story th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: #a54f22; text-align: left; border-bottom: 1px solid rgba(43,34,26,0.15); }
.prose-story th, .prose-story td { padding: 0.65rem 1rem 0.65rem 0; text-align: left; border-bottom: 1px solid rgba(43,34,26,0.08); }
.prose-story tr:last-child td { border-bottom: none; }

/* 포토월 매스너리 — 라운드/그림자 없이 크리스프하게, 캡션은 아래 상시 노출 */
.tile-wall { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; grid-auto-flow: dense; gap: 4px; }
.tile-wall .tile { position: relative; overflow: hidden; }
.tile-wall .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.22,.68,.28,1); }
.tile-wall .tile:hover img { transform: scale(1.04); }
.tile-wall .tile-caption {
  position: absolute; inset: auto 0 0 0; padding: 10px 12px; color: #fff; font-size: 0.78rem; font-weight: 500;
  background: linear-gradient(0deg, rgba(15,12,8,0.55), transparent);
}
.tile-wall .tile.big { grid-column: span 2; grid-row: span 2; }
.tile-wall .tile.tall { grid-row: span 2; }
.tile-wall .tile.wide { grid-column: span 2; }
@media (max-width: 768px) {
  .tile-wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .tile-wall .tile.tall { grid-row: span 1; }
}

.card-accent { border-top: 1px solid rgba(43,34,26,0.15); }

/* 코너 폴리오 넘버링 — 프로세스/시공사례 단계에 사용 */
.step-num { position: absolute; top: 0; right: 0; font-size: 2.5rem; font-weight: 800; color: rgba(43,34,26,0.10); line-height: 1; }

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #c2622e;
  outline-offset: 2px;
}

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── 세부페이지 디자인 개선 (섹션 구분·헤딩 위계·카드) ── */
.sec { position: relative; padding: 4rem 0; border-top: 1px solid rgba(43,34,26,0.10); }
.sec-alt { background: #f5efe4; }
@media (min-width: 768px) { .sec { padding: 5rem 0; } }
.sec-label { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; font-size: .75rem; font-weight: 700; letter-spacing: .2em; color: #a54f22; }
.sec-label::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; }
.sec-h2 { font-family: "Gowun Batang", Georgia, serif; font-size: 1.75rem; line-height: 1.35; font-weight: 700; color: #2b221a; letter-spacing: -0.01em; margin-bottom: 1.5rem; padding-bottom: 1rem; position: relative; }
.sec-h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 3px; background: #c2622e; }
@media (min-width: 768px) { .sec-h2 { font-size: 2.1rem; } }
.prose-story h3 { font-size: 1.1rem; font-weight: 700; color: #7c3b19; margin: 2rem 0 .75rem; padding-left: .75rem; border-left: 3px solid #eabf95; }
.prose-story strong { color: #2b221a; font-weight: 700; background: linear-gradient(transparent 62%, rgba(234,191,149,.55) 0); }
.prose-story ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1.2rem; line-height: 1.8; }
.prose-story tbody tr:nth-child(even) td { background: rgba(245,239,228,.55); }
.prose-story td, .prose-story th { padding-left: .75rem; }
.card-quote { position: relative; background: #fff; border: 1px solid rgba(43,34,26,0.10); padding: 2.25rem 2rem 2rem 2.5rem; box-shadow: 0 10px 24px -12px rgba(43,34,26,0.15); }
.card-quote::before { content: "\201C"; position: absolute; top: -.35rem; left: 1rem; font-family: Georgia, serif; font-size: 4.5rem; line-height: 1; color: #eabf95; }
.photo-card { position: relative; display: block; overflow: hidden; background: #2b221a; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .7s cubic-bezier(.22,.68,.28,1), opacity .4s; opacity: .92; }
.photo-card:hover img { transform: scale(1.06); opacity: 1; }
.photo-card .pc-cap { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.1rem 1rem; color: #fff; background: linear-gradient(0deg, rgba(20,15,10,.82), rgba(20,15,10,0)); }
.photo-card .pc-arrow { position: absolute; top: .8rem; right: .8rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: rgba(251,248,243,.92); color: #2b221a; transition: background .3s, color .3s, transform .3s; }
.photo-card:hover .pc-arrow { background: #c2622e; color: #fff; transform: translateX(2px); }