@charset "utf-8";
/* ==========================================================================
   시공실적 게시판 (bo_table=project, theme/basic/skin/board/aw_project)
   - daerosystem 설치시공 사례(portfolio_list.php · references.css) 구성을 에이원우드 색 · 글꼴로
   - 목록: list.skin.php / 보기 · 쓰기: 그누보드 갤러리 스킨(style.css) + 시공 자재(.aw-project-material)
   1. 레이아웃 (본문 + 오른쪽 사이드바)
   2. 제목
   3. 연도 탭
   4. 카드
   5. 사이드바 (검색 · Category · Share) · 1024px 이하 오른쪽 패널
   6. 관리 버튼 · 페이지 번호
   7. 보기 화면 시공 자재
   8. 등록 · 수정 화면 (write.skin.php)
   9. 라이트박스 (목록 카드 사진 크게 보기)
   10. 상세 화면 (view.skin.php, 관리자 전용)
   11. 상세 화면 댓글 (view_comment.skin.php)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 레이아웃 — 본문(가변) + 사이드바 280px
   -------------------------------------------------------------------------- */
.aw-project,
.aw-project *,
.aw-project *::before,
.aw-project *::after {
  box-sizing: border-box;
}

.aw-project {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(56px, 6vw, 120px) 0 clamp(80px, 8vw, 160px);
  font-family: var(--font-base);
  color: var(--color-text);
}

.aw-project .pg-layout {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  padding: 0 40px;
}

.aw-project .pg-main {
  flex: 1;
  min-width: 0;
}

.aw-project .pg-sidebar {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
  width: 280px;
}

.aw-project [hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   2. 제목 (가운데) — 영문(나무색 Marcellus) · 제목(Noto Serif KR) · 설명
   -------------------------------------------------------------------------- */
.aw-project__head {
  text-align: center;
}

.aw-project__eyebrow {
  margin: 0;
  font-family: Marcellus, serif;
  font-size: clamp(16px, 0.2589vw + 15.0291px, 20px);
  letter-spacing: 1.5px;
  color: var(--color-secondary);
}

.aw-project__title {
  margin: clamp(10px, 1vw, 16px) 0 0;
  font-family: "Noto Serif KR", serif;
  font-size: clamp(32px, 1.6vw + 22px, 52px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}

.aw-project__lead {
  margin: clamp(14px, 1.2vw, 24px) 0 0;
  font-size: clamp(15px, 0.3vw + 13px, 18px);
  line-height: 1.6;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

/* --------------------------------------------------------------------------
   3. 연도 탭 — 둥근 버튼, 넘치면 Swiper + 양쪽 화살표
   -------------------------------------------------------------------------- */
.aw-project__years {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(40px, 4vw, 64px);
}

.aw-project__years-swiper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.aw-project__years-swiper .swiper-slide {
  width: auto;
  padding: 2px 0;
}

.aw-project__year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.aw-project__year:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.aw-project__year.is-active {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: var(--color-white);
}

.aw-project__years-arrow {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-text);
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.aw-project__years-arrow:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

/* 연도가 한 줄에 다 들어가면(넘길 곳이 없으면) 화살표 숨김 */
.aw-project__years-arrow.swiper-button-disabled,
.aw-project__years-arrow.swiper-button-lock {
  display: none;
}

/* --------------------------------------------------------------------------
   4. 카드 — 3칸 (1600px 이하 2칸 · 767px 이하 1칸), 연한 나무색 바탕 · 큰 둥근 모서리
      사진 360px(어둡게 0.7) → 연도 알약 · 현장명 · ✓ 시공 자재
   -------------------------------------------------------------------------- */
.aw-project__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 40px;
}

.aw-project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 520px;
  overflow: hidden;
  background: rgb(var(--color-secondary-rgb) / 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.aw-project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgb(var(--color-primary-rgb) / 0.18);
}

/* 걸러 보기 후 왼쪽부터 차례로 나타남 (지연은 list.skin.php 가 지정) */
.aw-project-card.is-in {
  animation: aw-project-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes aw-project-card-in {
  from {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.aw-project-card__chk {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 3;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* 체크박스 — 24px, 포인트색(--color-accent)
   브라우저 기본 체크(accent-color)는 체크 선 굵기를 바꿀 수 없어 직접 그림:
   상자는 CSS, 체크 표시는 SVG 배경 — 선 굵기는 아래 SVG 의 stroke-width (지금 2.25 — 숫자가 작을수록 얇게, 1.75 · 2 · 2.5 …) */
.aw-project input[type="checkbox"],
.aw-project-write input[type="checkbox"] {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid rgb(var(--color-accent-rgb) / 0.55);
  border-radius: 50%;
  background: var(--color-white) no-repeat center / 16px 16px;
  /* 선택 전: 흐린 회색 체크 모양 (선택하면 아래 :checked 의 흰 체크로 바뀜) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c3bc' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.aw-project input[type="checkbox"]:checked,
.aw-project-write input[type="checkbox"]:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.aw-project input[type="checkbox"]:focus-visible,
.aw-project-write input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.aw-project-card__media {
  position: relative;
  flex-shrink: 0;
  height: 360px;
  overflow: hidden;
  background: #000;
}

.aw-project-card__media > a[data-aw-lb], /* 사진 링크만 — 같은 자리의 수정 버튼(a)은 제외 */
.aw-project-card__swiper,
.aw-project-card__swiper .swiper-slide,
.aw-project-card__swiper .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

/* 마우스를 올렸을 때 사진 확대(scale)가 옆 슬라이드 쪽으로 넘쳐 다음 사진이 살짝 겹쳐 보이지 않도록 — 사진 칸마다 잘라 냄 */
.aw-project-card__media > a[data-aw-lb],
.aw-project-card__swiper .swiper-slide {
  overflow: hidden;
}

.aw-project-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.4s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.aw-project-card:hover .aw-project-card__media img {
  opacity: 0.85;
  transform: scale(1.06); /* 사진 칸 안에서만 부드럽게 확대 */
}

.aw-project-card__swiper .swiper-pagination {
  bottom: 12px;
}

.aw-project-card__swiper .swiper-pagination-bullet {
  background: var(--color-white);
  opacity: 0.6;
}

.aw-project-card__swiper .swiper-pagination-bullet-active {
  background: var(--color-accent);
  opacity: 1;
}

/* 사진 넘김 화살표 — 카드에 마우스를 올렸을 때만 */
.aw-project-card__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
  color: var(--color-white);
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.aw-project-card__arrow.is-prev { left: 12px; }
.aw-project-card__arrow.is-next { right: 12px; }

.aw-project-card:hover .aw-project-card__arrow,
.aw-project-card__arrow:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .aw-project-card__arrow {
    display: none;
  }
}

/* 사진 없는 현장 — 나무색 자리표시 */
.aw-project-card__media .aw-project-card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    linear-gradient(135deg, rgb(var(--color-secondary-rgb) / 0.28), rgb(var(--color-secondary-rgb) / 0.08)),
    var(--color-bg-02);
  text-decoration: none;
  height: 100%;
}

.aw-project-card__empty span {
  font-family: Marcellus, serif;
  font-size: clamp(20px, 0.6vw + 14px, 26px);
  letter-spacing: 0.14em;
  color: rgb(var(--color-secondary-rgb) / 0.8);
}

.aw-project-card__empty em {
  font-style: normal;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.aw-project-card__body {
  padding: 24px 24px 36px;
}

.aw-project-card__date {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--color-white);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-secondary);
  white-space: nowrap;
  line-height: 1;
}

.aw-project-card__title {
  display: block;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  word-break: keep-all;
}

.aw-project-card__title:hover,
.aw-project-card__title:focus-visible {
  color: var(--color-secondary);
}

/* ✓ 체크 목록 (시공 자재) */
.aw-project-card__check {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 8px;
  list-style: none;
}

.aw-project-card__check li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.aw-project-card__check li::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--color-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.aw-project__empty {
  margin: 0;
  padding: 80px 0;
  text-align: center;
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   5. 사이드바 — 검색 · Category(개수) · Share
   -------------------------------------------------------------------------- */
.aw-project .pg-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 20px;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  background: var(--color-white);
  transition: border-color 0.2s ease;
}

.aw-project .pg-search-box:focus-within {
  border-color: var(--color-secondary);
}

.aw-project .pg-search-box .fe {
  font-size: 18px;
  color: var(--color-text-secondary);
}

.aw-project .pg-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  outline: none;
}

.aw-project .pg-sidebar-section {
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.aw-project .pg-sidebar-title {
  margin: 0 0 16px;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.aw-project .pg-cat-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aw-project .pg-cat-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.aw-project .pg-cat-list button span {
  font-family: var(--font-en);
  font-size: 14px;
}

.aw-project .pg-cat-list button:hover {
  background: rgb(var(--color-secondary-rgb) / 0.08);
  color: var(--color-secondary);
}

.aw-project .pg-cat-list .is-active button {
  background: rgb(var(--color-secondary-rgb) / 0.14);
  font-weight: 600;
  color: var(--color-secondary);
}

.aw-project .pg-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aw-project .pg-share-btn {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--color-secondary-rgb) / 0.12);
  color: var(--color-text);
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.aw-project .pg-share-btn:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* 카카오톡 — 말풍선 안 TALK 글자는 버튼 바탕색, 마우스를 올리면 카카오 노란색 */
.aw-project .pg-share-kakao__talk {
  fill: var(--color-bg-02);
  transition: fill 0.2s ease;
}

.aw-project .pg-share-kakao:hover {
  background: #fee500;
  color: #3c1e1e;
}

.aw-project .pg-share-kakao:hover .pg-share-kakao__talk {
  fill: #fee500;
}

/* 말풍선 안내 */
.aw-project .pg-share-btn[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--color-primary);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-white);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.aw-project .pg-share-btn[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* 1024px 이하 전용 열기 버튼 · 어두운 배경 (PC 에서는 숨김) */
.aw-project .pg-sidebar-toggle,
.aw-project .pg-sidebar-overlay {
  display: none;
}

/* --------------------------------------------------------------------------
   6. 관리 버튼 · 페이지 번호
   -------------------------------------------------------------------------- */
.aw-project__admin {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.aw-project__admin a,
.aw-project__admin button,
.aw-project__chkall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.aw-project__admin .is-primary {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: var(--color-white);
}

.aw-project .pg_wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 4vw, 80px);
}

.aw-project .pg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.aw-project .pg_page,
.aw-project .pg_current {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.aw-project .pg_current {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: var(--color-white);
}

/* 무한 스크롤 — 다음 카드를 불러오는 동안 점 3개 */
.aw-project__more {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 48px 0 8px;
}

.aw-project__more span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-secondary);
  opacity: 0.3;
  animation: aw-project-more 1s ease-in-out infinite;
}

.aw-project__more span:nth-child(2) { animation-delay: 0.15s; }
.aw-project__more span:nth-child(3) { animation-delay: 0.3s; }

@keyframes aw-project-more {
  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* 처음 · 이전 · 다음 · 맨끝 —그누보드 기본은 글자를 숨기고 gif 배경을 쓰는데, 위 흰 배경이 덮으므로 화살표를 직접 그림 */
.aw-project .pg_start,
.aw-project .pg_prev,
.aw-project .pg_next,
.aw-project .pg_end {
  position: relative;
  width: 40px;
  text-indent: -999px;
  overflow: hidden;
}

.aw-project .pg_start::before,
.aw-project .pg_prev::before,
.aw-project .pg_next::before,
.aw-project .pg_end::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--aw-pg-icon) center / contain no-repeat;
  mask: var(--aw-pg-icon) center / contain no-repeat;
}

.aw-project .pg_prev { --aw-pg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
.aw-project .pg_next { --aw-pg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.aw-project .pg_start { --aw-pg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5M18 17l-5-5 5-5'/%3E%3C/svg%3E"); }
.aw-project .pg_end { --aw-pg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 17 5-5-5-5M6 17l5-5-5-5'/%3E%3C/svg%3E"); }

.aw-project .pg_start:hover,
.aw-project .pg_prev:hover,
.aw-project .pg_next:hover,
.aw-project .pg_end:hover {
  border-color: var(--color-secondary);
  background: var(--color-white);
  color: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   반응형
   -------------------------------------------------------------------------- */
@media (max-width: 1600px) {
  .aw-project .pg-layout {
    gap: 40px;
  }

  .aw-project__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aw-project-card {
    min-height: 0;
  }

  .aw-project-card__media {
    height: 280px;
  }
}

@media (max-width: 1280px) {
  .aw-project .pg-layout {
    gap: 24px;
    padding: 0 24px;
  }

  .aw-project .pg-sidebar {
    width: 240px;
  }

  .aw-project-card__title {
    font-size: 18px;
  }

  .aw-project-card__check li {
    font-size: 14px;
  }

  .aw-project-card__date {
    font-size: 13px;
  }
}

/* 1024px 이하: 사이드바 → 오른쪽에서 밀려 들어오는 패널 + 화면 오른쪽 가장자리 열기 버튼 */
@media (max-width: 1024px) {
  .aw-project .pg-layout {
    display: block;
    padding: 0 16px;
  }

  .aw-project .pg-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10002;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    padding: 32px 24px;
    overflow-y: auto;
    background: var(--color-bg);
    box-shadow: -8px 0 24px rgb(var(--color-primary-rgb) / 0.15);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .aw-project .pg-sidebar.is-open {
    transform: none;
  }

  .aw-project .pg-sidebar-toggle {
    position: fixed;
    top: 36%;
    right: 0;
    z-index: 10003;
    display: grid;
    place-items: center;
    width: 36px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 8px 0 0 8px;
    background: var(--color-secondary);
    color: var(--color-white);
    font-size: 20px;
    cursor: pointer;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .aw-project .pg-sidebar-toggle .fe {
    transition: transform 0.35s ease;
  }

  .aw-project .pg-sidebar-toggle.is-open {
    right: min(320px, 85vw);
  }

  .aw-project .pg-sidebar-toggle.is-open .fe {
    transform: rotate(180deg);
  }

  .aw-project .pg-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: block;
    background: rgb(var(--color-primary-rgb) / 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .aw-project .pg-sidebar-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 767px) {
  .aw-project__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .aw-project-card__media {
    height: 240px;
  }

  .aw-project__year {
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
  }

  /* 관리 버튼 (전체선택 · 선택삭제 · 관리 · 글쓰기) — 작게 해서 한 줄에 */
  .aw-project__admin {
    gap: 6px;
  }

  .aw-project__admin a,
  .aw-project__admin button,
  .aw-project__chkall {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  .aw-project__chkall input[type="checkbox"] {
    width: 20px;
    height: 20px;
    background-size: 13px 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aw-project-card,
  .aw-project-card.is-in,
  .aw-project-card__media img,
  .aw-project .pg-sidebar {
    transition: none;
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   7. 보기 화면 — 제목 아래 시공 자재
   -------------------------------------------------------------------------- */
.aw-project-material {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--color-text);
}

.aw-project-material span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(var(--color-secondary-rgb) / 0.12);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   8. 등록 · 수정 화면 — daerosystem 설치시공 사례 등록 화면 구성
      큰 제목 + 필수 안내 / 라벨 위 · 입력칸 아래 (2칸 줄) / 도움말 말풍선 / 사진 끌어다 놓기 / 사진 칸(미리보기)
   -------------------------------------------------------------------------- */
.aw-project-write,
.aw-project-write * {
  box-sizing: border-box;
}

.aw-project-write {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 4vw, 72px) 0 clamp(80px, 8vw, 140px);
  font-family: var(--font-base);
  color: var(--color-text);
}

.aw-pw__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: clamp(24px, 2.4vw, 40px);
}

.aw-project-write .aw-pw__title {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(28px, 1.4vw + 18px, 44px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}

.aw-pw__required {
  margin: 0;
  font-size: 14px;
  color: var(--color-secondary);
}

.aw-pw__required em,
.aw-pw__label em {
  font-style: normal;
  color: #d9534f;
}

.aw-pw__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}

.aw-pw__field {
  margin-bottom: 24px;
}

.aw-pw__label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.aw-project-write .aw-pw__input,
.aw-project-write .aw-pw__content textarea {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  font: inherit;
  font-size: 16px;
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aw-project-write .aw-pw__content textarea {
  height: 320px;
  padding: 16px 20px;
  line-height: 1.6;
  resize: vertical;
}

.aw-project-write .aw-pw__input::placeholder,
.aw-project-write .aw-pw__content textarea::placeholder {
  color: #9a948e;
}

.aw-project-write .aw-pw__input:focus,
.aw-project-write .aw-pw__content textarea:focus {
  border-color: var(--color-secondary);
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--color-secondary-rgb) / 0.15);
}

/* 선택 상자 — 오른쪽 화살표 */
.aw-pw__select {
  position: relative;
}

.aw-pw__select select,
.aw-pw__select .aw-select__button {
  padding-right: 48px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.aw-pw__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

/* 도움말 (i) 말풍선 */
.aw-pw__tip {
  position: relative;
  display: inline-grid;
  place-items: center;
  margin-left: 4px;
  color: var(--color-secondary);
  font-size: 16px;
  cursor: help;
  outline: none;
}

.aw-pw__tip-text {
  position: absolute;
  bottom: calc(100% + 10px);
  left: -12px;
  z-index: 10;
  width: max-content;
  max-width: min(360px, 80vw);
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--color-primary);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  word-break: keep-all;
}

.aw-pw__tip:hover .aw-pw__tip-text,
.aw-pw__tip:focus .aw-pw__tip-text {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* 사진 한 번에 올리기 (끌어다 놓기) */
.aw-pw__drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 88px;
  padding: 20px;
  border: 1.5px dashed rgb(var(--color-secondary-rgb) / 0.45);
  border-radius: 8px;
  background: rgb(var(--color-secondary-rgb) / 0.06);
  font-size: 15px;
  color: var(--color-text-secondary);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.aw-pw__drop .fe {
  flex: none;
  font-size: 34px;
  color: rgb(var(--color-secondary-rgb) / 0.7);
}

.aw-pw__drop:hover,
.aw-pw__drop.is-over {
  border-color: var(--color-secondary);
  background: rgb(var(--color-secondary-rgb) / 0.12);
}

/* 시공 사진 칸 */
.aw-pw__files {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}

.aw-pw__file .aw-pw__label {
  margin-bottom: 8px;
  font-size: 14px;
}

.aw-pw__file-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

/* 미리보기 — 사진을 고르기 전에는 빈 칸 */
.aw-pw__thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-02) no-repeat center / cover;
}

.aw-pw__file-box {
  display: flex;
  flex: 1;
  min-width: 0;
  height: 56px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  cursor: pointer;
}

.aw-pw__file-name {
  flex: 1;
  min-width: 0;
  padding: 0 20px;
  overflow: hidden;
  font-size: 15px;
  line-height: 54px;
  color: #9a948e;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.aw-pw__file.is-filled .aw-pw__file-name {
  color: var(--color-text);
}

.aw-pw__file-btn {
  display: grid;
  flex: none;
  place-items: center;
  padding: 0 24px;
  border-left: 1px solid var(--color-border);
  background: var(--color-bg-02);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.aw-pw__file-box:hover .aw-pw__file-btn,
.aw-pw__file-box:focus-within .aw-pw__file-btn {
  background: var(--color-secondary);
  color: var(--color-white);
}

.aw-project-write .aw-pw__file-desc {
  height: 44px;
  margin-top: 8px;
  font-size: 14px;
}

.aw-pw__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.aw-pw__file-del {
  margin-top: 8px;
}

.aw-pw__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

/* 취소 · 등록 */
.aw-pw__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

.aw-project-write .aw-pw__btn {
  display: inline-grid;
  place-items: center;
  min-width: 160px;
  height: 56px;
  padding: 0 32px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.aw-project-write .aw-pw__btn:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

/* 등록 버튼 — 메인 견적 폼 [문의 접수하기](inquiry.css .aw-inquiry__submit)와 같은 색
   평소: 진한 올리브(--color-accent-dark) 바탕 · 흰 글자 / 마우스: 연한 나무색(--color-secondary-light) 바탕 · 본문색 글자 */
.aw-project-write .aw-pw__btn.is-primary {
  border-color: var(--color-accent-dark);
  background: var(--color-accent-dark);
  color: var(--color-white);
}

.aw-project-write .aw-pw__btn.is-primary:hover,
.aw-project-write .aw-pw__btn.is-primary:focus-visible {
  border-color: var(--color-secondary-light);
  background: var(--color-secondary-light);
  color: var(--color-text);
}

.aw-project-write .aw-pw__btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 767px) {
  .aw-pw__row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 도움말 말풍선: (i) 기준이 아닌 라벨 줄 폭에 맞춰 — 숨어 있을 때도 화면 밖으로 넘쳐 가로 스크롤이 생기던 문제 */
  .aw-pw__label {
    position: relative;
  }

  .aw-pw__tip {
    position: static;
  }

  .aw-pw__tip-text {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }

  .aw-pw__drop {
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
  }

  .aw-project-write .aw-pw__content textarea {
    height: 240px;
  }

  .aw-pw__file-btn {
    padding: 0 16px;
  }

  .aw-project-write .aw-pw__btn {
    flex: 1;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   9. 라이트박스 (.aw-lb, list.skin.php 가 body 끝에 만듦) — daerosystem 사례 목록과 같은 방식
      흐린 어두운 배경 · 가운데 사진 · 아래 현장명 / "n of N" · 화면 양끝 화살표 · 오른쪽 위 닫기
   -------------------------------------------------------------------------- */
/* 카드: 현장명은 라이트박스를 여는 버튼 (사진 없는 현장은 글자만) */
.aw-project button.aw-project-card__title {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: zoom-in;
}

.aw-project strong.aw-project-card__title:hover {
  color: var(--color-text);
}

.aw-project-card__media a[data-aw-lb] {
  cursor: zoom-in;
}

/* 관리자만: 사진 오른쪽 위 수정 버튼 */
.aw-project .aw-project-card__edit {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.aw-project .aw-project-card__edit:hover,
.aw-project .aw-project-card__edit:focus-visible {
  background: var(--color-secondary);
  color: var(--color-white);
}

html.aw-lb-open,
html.aw-lb-open body {
  overflow: hidden;
}

.aw-lb {
  position: fixed;
  inset: 0;
  z-index: 100001; /* 헤더 · 빠른 메뉴 · 화면 질감(100000) 위 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 96px;
  background: rgb(20 14 10 / 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.25s ease;
  box-sizing: border-box;
}

.aw-lb.is-open {
  opacity: 1;
}

.aw-lb[hidden] {
  display: none;
}

.aw-lb__figure {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.aw-lb__img {
  display: block;
  max-width: min(1400px, 100%);
  max-height: calc(100vh - 72px * 2 - 40px);
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.aw-lb__img.is-loaded {
  opacity: 1;
}

.aw-lb__caption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  font-family: var(--font-base);
  font-size: 15px;
  color: rgb(255 255 255 / 0.9);
}

.aw-lb__count {
  flex: none;
  font-family: var(--font-en);
  font-size: 14px;
  color: rgb(255 255 255 / 0.65);
}

.aw-lb__close,
.aw-lb__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  color: var(--color-primary);
  font-size: 22px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.aw-lb__close:hover,
.aw-lb__nav:hover,
.aw-lb__close:focus-visible,
.aw-lb__nav:focus-visible {
  background: var(--color-secondary);
  color: var(--color-white);
}

.aw-lb__close {
  top: 20px;
  right: 20px;
}

.aw-lb__nav {
  top: 50%;
  margin-top: -24px;
}

.aw-lb__nav.is-prev { left: 24px; }
.aw-lb__nav.is-next { right: 24px; }

.aw-lb__nav[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .aw-lb {
    padding: 64px 12px;
  }

  .aw-lb__img {
    max-height: calc(100vh - 64px * 2 - 40px);
  }

  .aw-lb__nav {
    top: auto;
    bottom: 16px;
    margin-top: 0;
    width: 44px;
    height: 44px;
  }

  .aw-lb__nav.is-prev { left: calc(50% - 56px); }
  .aw-lb__nav.is-next { right: calc(50% - 56px); }

  .aw-lb__caption {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aw-lb,
  .aw-lb__img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   10. 상세 화면 (view.skin.php, 관리자 전용) — 목록 카드와 같은 색 · 글꼴
       목록으로 / 영문 · 연도 알약 · 제목(Noto Serif KR) · ✓ 자재 / 날짜 · 관리 버튼 /
       사진 갤러리(첫 장 크게 + 3칸) / 작업 내용 / 이전 · 다음 현장
   -------------------------------------------------------------------------- */
.aw-project-view,
.aw-project-view * {
  box-sizing: border-box;
}

/* 갤러리 스킨 style.css 의 #bo_v(흰 배경) · #bo_v_con(여백 · 최소 높이) 덮어쓰기 */
#bo_v.aw-project-view {
  margin-bottom: 0;
  background: transparent;
}

.aw-project-view {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 64px) 0 clamp(80px, 8vw, 140px);
  font-family: var(--font-base);
  color: var(--color-text);
}

.aw-pv__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.aw-pv__back:hover {
  color: var(--color-secondary);
}

.aw-pv__head {
  margin-top: clamp(24px, 2.4vw, 40px);
}

.aw-pv__eyebrow {
  margin: 0 0 16px;
  font-family: Marcellus, serif;
  font-size: clamp(15px, 0.2vw + 13px, 18px);
  letter-spacing: 1.5px;
  color: var(--color-secondary);
}

.aw-pv__year {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgb(var(--color-secondary-rgb) / 0.1);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-secondary);
}

.aw-project-view .aw-pv__title {
  margin: 16px 0 0;
  font-family: "Noto Serif KR", serif;
  font-size: clamp(28px, 1.4vw + 18px, 44px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  word-break: keep-all;
}

.aw-pv__check {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.aw-pv__check li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.aw-pv__check li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 날짜 · 조회 / 관리 버튼 */
.aw-pv__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(24px, 2.4vw, 40px);
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.aw-pv__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.aw-pv__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.aw-pv__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aw-pv__btns a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.aw-pv__btns a:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.aw-pv__btns a.is-danger:hover {
  border-color: #c0392b;
  color: #c0392b;
}

.aw-pv__btns a.is-primary {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: var(--color-white);
}

/* 사진 갤러리 — 첫 장 크게(16:9), 나머지는 3칸(4:3) */
.aw-pv__body {
  margin-top: clamp(32px, 3vw, 56px);
}

.aw-pv__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.aw-pv__photo {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #000;
  cursor: zoom-in;
}

.aw-pv__photo:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.aw-pv__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.aw-pv__photo:hover img {
  opacity: 0.85;
  transform: scale(1.03);
}

.aw-pv__nophoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 16 / 7;
  background:
    linear-gradient(135deg, rgb(var(--color-secondary-rgb) / 0.28), rgb(var(--color-secondary-rgb) / 0.08)),
    var(--color-bg-02);
}

.aw-pv__nophoto span {
  font-family: Marcellus, serif;
  font-size: clamp(22px, 1vw + 14px, 32px);
  letter-spacing: 0.14em;
  color: rgb(var(--color-secondary-rgb) / 0.8);
}

.aw-pv__nophoto em {
  font-style: normal;
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* 작업 내용 · 첨부 · 링크 */
.aw-pv__content,
.aw-pv__files {
  margin-top: clamp(40px, 4vw, 64px);
}

.aw-project-view .aw-pv__subtitle {
  margin: 0 0 16px;
  font-family: var(--font-base);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.aw-project-view #bo_v_con {
  min-height: 0;
  margin: 0;
  overflow: visible;
  padding: 24px 28px;
  background: rgb(var(--color-secondary-rgb) / 0.06);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

.aw-pv__files ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aw-pv__files li + li {
  margin-top: 8px;
}

.aw-pv__files a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--color-text);
  text-decoration: none;
}

.aw-pv__files a:hover {
  color: var(--color-secondary);
}

.aw-pv__files a span {
  color: var(--color-text-secondary);
}

/* 이전 · 다음 현장 */
.aw-pv__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(48px, 5vw, 80px);
}

.aw-pv__nav-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 24px 28px;
  background: rgb(var(--color-secondary-rgb) / 0.1);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.aw-pv__nav-item.is-next {
  align-items: flex-end;
  text-align: right;
}

.aw-pv__nav-item.is-empty {
  background: none;
}

.aw-pv__nav-item span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-secondary);
}

.aw-pv__nav-item strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

a.aw-pv__nav-item:hover {
  background: rgb(var(--color-secondary-rgb) / 0.18);
}

@media (max-width: 767px) {
  .aw-pv__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .aw-pv__bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .aw-project-view #bo_v_con {
    padding: 20px;
  }

  .aw-pv__nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .aw-pv__nav-item.is-empty {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aw-pv__photo img {
    transition: none;
  }
}

/* 필수 입력칸 오른쪽 위 작은 빨간 점 숨김 — 그누보드 default.css 의 .required 배경 그림(!important)을 지움, 라벨의 * 로 대신함 */
.aw-project-write .required,
.aw-project-write textarea.required {
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   11. 상세 화면 댓글 (view_comment.skin.php — 그누보드 갤러리 스킨 그대로, 스타일만 에이원우드 색 · 모양으로)
       style.css 의 파란색 · 흰 막대 · 네모 체크를 덮어씀 (아이디 규칙보다 강하도록 .aw-project-view 를 앞에)
   -------------------------------------------------------------------------- */
/* 댓글 N — 접기/펼치기 버튼 */
.aw-project-view .cmt_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: clamp(48px, 5vw, 72px) 0 0;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.aw-project-view .cmt_btn span.total {
  position: relative;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-secondary);
}

.aw-project-view .cmt_btn b {
  margin-right: 4px;
  font-size: inherit;
  color: var(--color-text);
}

.aw-project-view .cmt_btn span.total::after {
  bottom: -17px;
  height: 2px;
  background: var(--color-accent);
}

/* 오른쪽 접기 화살표 — 회색 그림 대신 Feather chevron */
.aw-project-view .cmt_btn span.cmt_more {
  float: none;
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--color-text-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.aw-project-view .cmt_btn_op span.cmt_more {
  transform: rotate(180deg);
}

/* 댓글 목록 */
.aw-project-view #bo_vc article {
  margin: 16px 0 0;
  padding: 20px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--color-white);
}

.aw-project-view #bo_vc article .cm_wrap {
  max-width: none;
  width: calc(100% - 60px);
}

.aw-project-view #bo_vc .cmt_contents {
  padding: 8px 0 0;
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.aw-project-view .bo_vc_hdinfo {
  margin-left: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.aw-project-view #bo_vc_empty {
  padding: 56px 0 !important;
  color: var(--color-text-secondary);
}

/* 댓글 옵션(⋮) 펼침 메뉴 */
.aw-project-view .bo_vc_act {
  border-color: var(--color-border);
  border-radius: 8px;
  overflow: visible;
}

.aw-project-view .bo_vc_act::before {
  border-bottom-color: var(--color-border);
}

.aw-project-view .bo_vc_act li {
  border-color: var(--color-border);
}

.aw-project-view .bo_vc_act li a:hover {
  color: var(--color-secondary);
}

/* 댓글 쓰기 — 등록 화면 입력칸과 같은 모양 */
.aw-project-view .bo_vc_w {
  margin: 24px 0 0;
}

.aw-project-view .bo_vc_w textarea,
.aw-project-view .bo_vc_w .frm_input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  font: inherit;
  font-size: 16px;
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aw-project-view .bo_vc_w textarea {
  height: 140px;
  padding: 16px 20px;
  line-height: 1.6;
  resize: vertical;
}

.aw-project-view .bo_vc_w .frm_input {
  width: auto;
  height: 48px;
  padding: 0 16px;
}

.aw-project-view .bo_vc_w textarea::placeholder,
.aw-project-view .bo_vc_w .frm_input::placeholder {
  color: #9a948e;
}

.aw-project-view .bo_vc_w textarea:focus,
.aw-project-view .bo_vc_w .frm_input:focus {
  border-color: var(--color-secondary);
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--color-secondary-rgb) / 0.15);
}

/* 필수 칸 오른쪽 위 빨간 점(그누보드 default.css) 숨김 */
.aw-project-view .bo_vc_w .required {
  background-image: none !important;
}

/* 비밀글 체크 · 댓글등록 — 한 줄 양 끝 */
.aw-project-view .bo_vc_w .btn_confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.aw-project-view .bo_vc_w .secret_cm {
  float: none;
}

/* 비밀글 체크 — 목록 · 등록 화면과 같은 24px 둥근 체크 */
.aw-project-view .bo_vc_w .chk_box input[type="checkbox"] + label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-left: 0;
  font-size: 15px !important;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.aw-project-view .bo_vc_w .chk_box input[type="checkbox"] + label span {
  position: static;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1.5px solid rgb(var(--color-accent-rgb) / 0.55);
  border-radius: 50%;
  background: var(--color-white) no-repeat center / 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c3bc' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.aw-project-view .bo_vc_w .chk_box input[type="checkbox"]:checked + label {
  color: var(--color-text);
}

.aw-project-view .bo_vc_w .chk_box input[type="checkbox"]:checked + label span {
  border-color: var(--color-accent);
  border-radius: 50%;
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.aw-project-view .bo_vc_w .chk_box input[type="checkbox"]:focus-visible + label span {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* 댓글등록 — 등록 화면 [등록하기] 와 같은 둥근 버튼 · 색 */
.aw-project-view .bo_vc_w .btn_submit {
  min-width: 140px;
  height: 52px;
  padding: 0 28px;
  border: 1px solid var(--color-accent-dark);
  border-radius: 999px;
  background: var(--color-accent-dark);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.aw-project-view .bo_vc_w .btn_submit:hover,
.aw-project-view .bo_vc_w .btn_submit:focus-visible {
  border-color: var(--color-secondary-light);
  background: var(--color-secondary-light);
  color: var(--color-text);
}

@media (max-width: 767px) {
  .aw-project-view #bo_vc article {
    padding: 16px 18px;
  }

  .aw-project-view .bo_vc_w .btn_submit {
    min-width: 0;
    height: 48px;
    padding: 0 24px;
  }
}