/* artist-page-v2.css
 * Generated by Phase 4 (safe-merge) for (예술인지원_MNU-U-090000, v2)
 * Source CSS (in cascade order): artist-page-v2.css
 */

/* === source: artist-page-v2.css === */
@charset "utf-8";

/*
  MNU-U-090000 예술인지원 — artist-page-v2.css
  ─────────────────────────────────────────────────────────
  적용 파일 : MNU-U-090101_평택예술인목록_design_v2.html   (.artist-list-v2)
              MNU-U-090102_평택예술인상세_design_v2.html   (.artist-detail-v2)
  격리 방식 : 페이지별 wrapper prefix로 스타일 격리
  self-contained : output.css / page-header.css / header.css / footer.css 제외,
                   이 파일 1개로 모듈 고유 스타일 완결
  의존성    : artist-page.css 없음, pfmc-page-v2.css 없음
  Figma     : 목록 node-id=13773-3793 / 상세 node-id=13902-16742
  ─────────────────────────────────────────────────────────
  토큰 매핑 주요 항목
    카드 radius 16px  → --ds-radius-xlarge (정확 일치)
    이름 28px         → --ds-font-size-28  (정확 일치, 사용자 확인)
    카드 컬 gap 40px  → --ds-number-20 (정확 일치)
    카드 row gap 60px → --ds-number-30 (정확 일치)
    오버레이 black 25% → color-mix(in srgb, var(--ds-color-gray-100) 25%, transparent)
    상세 이름 38px    → --ds-font-size-40  (40px, ±2px)
    히어로 gap 72px   → --ds-number-36 (72px, 정확 일치)
*/


/* =====================================================================
   BASE LAYER — artist-page.css에서 추출한 공통 base 룰
   ===================================================================== */

/* 목록: 탭 간격 */
.artist-list-v2 .ds-tab {
  margin-top: 5rem;
}
.artist-list-v2 .ds-tab + *,
.artist-list-v2 .page-header__select + *,
.artist-list-v2 .artist-apply-cta + * {
  margin-top: 5rem;
}


/* 목록: 필터 → 리스트 메타 간격 */
.artist-list-v2 .ds-filter-search + .ds-board-list__top {
  margin-top: var(--ds-number-20);         /* 40px */
}

/* 목록 툴바 우측 그룹 — 신청하기 버튼(좌) + 활동지역 필터(우) */
.artist-list-v2 .artist-list-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--ds-number-10);                /* 20px (버튼 ↔ 필터) */
  flex-wrap: wrap;
}
/* 신청 버튼 — .ds-btn에 line-height가 없어 페이지 상속 줄간격으로 높이가 늘어남(40.39px).
   line-height 고정으로 웹진 버튼과 높이 통일 */
.artist-list-v2 .artist-list-apply {
  line-height: 1;
}

/* 목록 하단 — 페이지네이션(가운데) + 신청하기(우측, 게시판 글쓰기 관습 위치) */
.artist-list-v2 .artist-list-bottom {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rem;                    /* 페이지네이션↔푸터 간격 (기존 .ds-pagination에서 이전) */
}
.artist-list-v2 .artist-list-bottom .ds-pagination {
  margin: 0;                               /* 자체 margin 제거 → 래퍼가 간격 관리, 버튼과 세로 정렬 일치 */
}
.artist-list-v2 .artist-list-bottom .artist-list-apply {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .artist-list-v2 .artist-list-bottom {
    flex-direction: column;
    gap: var(--ds-number-8);                /* 16px */
  }
  .artist-list-v2 .artist-list-bottom .artist-list-apply {
    position: static;
    transform: none;
    width: 100%;
  }
}

/* 목록: 그리드 → 하단(페이지네이션+신청) 간격 */
.artist-list-v2 .artist-grid + .artist-list-bottom,
.artist-list-v2 .artist-grid + .ds-empty-state + .artist-list-bottom {
  margin-top: 10rem;                       /* DS 스케일 없음 (최대 80px), 레이아웃 관례 유지 */
}

/* 상세: 공통 base */
.artist-detail-v2 .artist-profile {
  width: 100%;
}

.artist-detail-v2 .artist-profile__url {
  color: var(--ds-color-brand-blue-aa);
  text-decoration: none;
  transition: color 0.15s ease;
}

.artist-detail-v2 .artist-profile__url:hover,
.artist-detail-v2 .artist-profile__url:focus-visible {
  text-decoration: underline;
}

/* 상세: 히어로 ↔ 본문 간격 — hero-inner padding-bottom(100/80/60px)이 담당 */
.artist-detail-v2 .artist-profile__hero + .sub-page-wrap {
  margin-top: 0;
}


/* =====================================================================
   목록 (.artist-list-v2)
   ===================================================================== */


/* ── V02. 검색 + 장르 필터 ── */

.artist-list-v2 .ds-filter-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-8);                 /* 16px */
}

.artist-list-v2 .ds-filter-search .ds-board-toolbar {
  width: 100%;
  max-width: 70rem;
}

.artist-list-v2 .ds-filter-search .ds-board-toolbar__search {
  width: 100%;
}

.artist-list-v2 .ds-filter-search .ds-input-group {
  background: var(--ds-color-gray-5);
  border-radius: var(--ds-radius-large);   /* 12px */
  overflow: hidden;
}

/* chip 영역 — DS layout.css의 .ds-filter-search 표준(주황 pill, PC 가운데, 모바일 한줄 스크롤) 그대로 사용
   (HTML이 .ds-filter-search 래퍼로 감싸져 있으면 DS가 자동 처리) */


/* ── V03. 총 건수 + 활동지역 필터 ── */

.artist-list-v2 .ds-board-list__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-number-4);                 /* 8px */
}

/* [CUSTOM] MO ≤350px — 총건수+필터 세로 스택 (pfmc-page-V2.css 공통 350 규칙과 동일 기준, .artist-list-v2 자체 재정의가 우선하므로 같은 구체성으로 보정) */
@media (max-width: 350px) {
  .artist-list-v2 .ds-board-list__top {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0.5rem;                           /* 총건수 ↔ 필터 */
    min-height: 0;
    padding-block: 0;
    margin-bottom: var(--ds-number-5);     /* 10px — 필터 ↔ 게시글 */
  }
}

.artist-list-v2 .ds-board-list__count {
  font-size: var(--ds-font-size-15);
  color: var(--ds-color-gray-60);
}

.artist-list-v2 .ds-board-list__count strong {
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
}



/* ── V04. 카드 + 그리드 (사진 상단 + 푸터 바 하단) ── */

.artist-list-v2 .artist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--ds-number-20);         /* 40px */
  row-gap: var(--ds-number-30);            /* 60px */
}

/* hidden 속성 우선 (탭 전환 시 비활성 패널 숨김) */
.artist-list-v2 .artist-grid[hidden] {
  display: none;
}

/* 모달 hidden 가드 — DS .ds-modal-backdrop{display:flex}(author)가 브라우저 기본 [hidden]{display:none}(UA)을
   덮어써 hidden 속성이 있어도 모달이 상시 노출되던 문제 차단. 여는 트리거로 hidden 제거 시에만 노출.
   (login/mypage/community 페이지 CSS와 동일 패턴 — artist 누락분 보정) */
.ds-modal-backdrop[hidden] { display: none; }

/* 카드 전체: flex column, aspect-ratio로 전체 비율 유지 */
.artist-list-v2 .artist-card {
  position: relative;                       /* footer absolute anchor — glass 효과 위해 사진 위에 footer 겹침 */
  display: flex;
  flex-direction: column;
  border-radius: var(--ds-radius-xlarge);  /* 16px */
  overflow: hidden;
  text-decoration: none;
  background-color: var(--ds-color-gray-10);
  aspect-ratio: 3 / 4;
  outline-offset: 0.3rem;
}

/* 공연단체(예술단체) 탭만: 카드 배경 흰색 (CI 로고 가시성) */
.artist-list-v2 #panel-group .artist-card {
  background-color: var(--ds-color-gray-0);
}

/* 사진 영역: 남은 공간 전부 차지 */
.artist-list-v2 .artist-card__bg {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.artist-list-v2 .artist-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.artist-list-v2 .artist-card:hover .artist-card__bg img {
  transform: scale(1.06);
}

/* 푸터 바: 사진 위에 absolute로 겹쳐 글래스 효과 (rgba 0/0/0/.25 + blur 8) */
.artist-list-v2 .artist-card__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-number-4);                 /* 8px */
  padding: var(--ds-number-8) 0 var(--ds-number-8) var(--ds-number-10);  /* 16px 0 16px 20px */
  background: color-mix(in srgb, var(--ds-color-gray-90, #1e2124) 25%, transparent);  /* rgba(17,17,17,0.25) */
  -webkit-backdrop-filter: blur(0.8rem);   /* Safari 호환 */
  backdrop-filter: blur(0.8rem);
  transition: background 0.3s ease;
}

.artist-list-v2 .artist-card:hover .artist-card__footer {
  background: var(--ds-color-brand-blue-aa);
}

.artist-list-v2 .artist-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-1);                 /* 2px */
  min-width: 0;
}

.artist-list-v2 .artist-card__name {
  font-size: var(--ds-font-size-24);       /* 24px — Figma 28px에서 한 단계 축소 */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-0);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artist-list-v2 .artist-card__genre {
  font-size: var(--ds-font-size-14);
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-0);
  opacity: 0.85;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artist-list-v2 .artist-card__arrow {
  flex-shrink: 0;
  display: flex;
  padding-right: var(--ds-number-10);      /* 20px — 이름 왼쪽 여백과 동일 */
  color: var(--ds-color-gray-0);
  transition: transform 0.2s ease;
}

.artist-list-v2 .artist-card:hover .artist-card__arrow {
  transform: translate(0.2rem, -0.2rem);
}

.artist-list-v2 .artist-card__arrow svg {
  width: var(--ds-number-20);              /* 40px */
  height: var(--ds-number-20);
  display: block;
}

.artist-list-v2 .artist-card__arrow svg path {
  stroke-width: 1;
}


/* =====================================================================
   상세 (.artist-detail-v2)
   ===================================================================== */

/* ── V01. 히어로 (사진 좌 / 정보 우) ── */

.artist-detail-v2 .artist-profile__hero-inner {
  max-width: var(--ds-contents-size-wide, 1440px);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-number-36);               /* 72px */
  padding: 10rem 0;                       /* PC 100px — 공연·전시 상세 v3 케이스 C와 통일 (자체 명시) */
}

.artist-detail-v2 .artist-profile__hero-photo {
  flex-shrink: 0;
  width: 33rem;
  height: 40rem;
  border-radius: var(--ds-radius-large);  /* 12px */
  background-color: var(--ds-color-gray-10);
  overflow: hidden;
}

.artist-detail-v2 .artist-profile__hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist-detail-v2 .artist-profile__hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-11);               /* 22px */
}

.artist-detail-v2 .artist-profile__hero-name {
  display: flex;
  align-items: baseline;
  gap: var(--ds-number-6);               /* 12px */
  margin: 0;
}

.artist-detail-v2 .artist-profile__name {
  font-size: var(--ds-font-size-40);     /* Figma 38px → 40px (±2px) */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-95);
  letter-spacing: var(--ds-typo-letter-spacing);
  line-height: 1;
}

.artist-detail-v2 .artist-profile__role {
  font-size: var(--ds-font-size-17);
  font-weight: var(--ds-typo-font-weight-semibold);
  color: var(--ds-color-gray-60);
  white-space: nowrap;
}

.artist-detail-v2 .artist-profile__hero-divider {
  height: var(--ds-border-width-thin);   /* 1px */
  background-color: var(--ds-color-primary-90);
  width: 100%;
}

.artist-detail-v2 .artist-profile__hero-meta {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.artist-detail-v2 .artist-profile__hero-meta dl {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--ds-number-2);               /* 4px */
  margin: 0;
  padding: 1.4rem var(--ds-number-10);   /* 14px 20px */
  border-top: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
}

.artist-detail-v2 .artist-profile__hero-meta dl:first-child {
  border-top: none;
}

.artist-detail-v2 .artist-profile__hero-meta dt {
  flex-shrink: 0;
  width: 10rem;
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-70);
  line-height: var(--ds-typo-line-height-body);
}

.artist-detail-v2 .artist-profile__hero-meta dd {
  flex: 1;
  min-width: 0;
  font-size: var(--ds-font-size-17);
  font-weight: var(--ds-typo-font-weight-semibold);
  color: var(--ds-color-gray-90);
  margin: 0;
  line-height: var(--ds-typo-line-height-body);
}

.artist-detail-v2 .artist-profile__sns {
  display: flex;
  gap: var(--ds-number-4);               /* 8px */
  list-style: none;
  margin: 0;
  padding: 0;
}

.artist-detail-v2 .artist-profile__sns li {
  display: inline-flex;
}

.artist-detail-v2 .artist-profile__sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-number-16);            /* 32px */
  height: var(--ds-number-16);
  transition: opacity 0.15s ease;
}

.artist-detail-v2 .artist-profile__sns a:hover,
.artist-detail-v2 .artist-profile__sns a:focus-visible {
  opacity: 0.82;
}

.artist-detail-v2 .artist-profile__sns img {
  width: var(--ds-number-16);            /* 32px — SVG 원본 크기 */
  height: var(--ds-number-16);
}


/* ── V02. 예술인 정보 섹션 ── */

.artist-detail-v2 .pfmc-subtitle-v3-wrap {
  width: 100vw;
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(180deg, var(--ds-color-gray-5) 0%, var(--ds-color-gray-0) 100%);
  padding-top: var(--ds-number-30);      /* 60px */
  padding-bottom: var(--ds-number-15);   /* 30px */
  margin-top: 0;
}

.artist-detail-v2 .pfmc-subtitle-v3-inner {
  max-width: var(--ds-contents-size-wide);
  margin-inline: auto;
  padding-inline: 0;
}

.artist-detail-v2 .pfmc-subtitle-v3 {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-number-6);               /* 12px */
}

.artist-detail-v2 .pfmc-subtitle-v3__title {
  font-size: var(--ds-font-size-28);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-95);
  line-height: 1.2;
  letter-spacing: -0.007em;
  margin: 0;
}

.artist-detail-v2 .pfmc-subtitle-v3__line {
  width: 100%;
  height: var(--ds-border-width-medium); /* 2px */
  background: var(--ds-color-brand-dark);
}

.artist-detail-v2 .artist-profile__bio-content {
  margin-top: var(--ds-number-15);       /* 30px — 공연·전시 상세 v3와 통일 (wrap 끝 → 본문) */
  white-space: pre-line;                 /* 소개 텍스트 줄바꿈(엔터) 보존 — FO 신청 여러 줄 입력 */
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-90);
  line-height: var(--ds-typo-line-height-body);
}

/* CMS 에디터 본문 이미지 — 컨테이너 폭 초과 방지(찌그러짐/깨짐 방지). 시안엔 본문 이미지가 없어 규칙이 빠져 있었음 */
.artist-detail-v2 .artist-profile__bio-content img {
  max-width: 100%;
  height: auto;
}
.artist-detail-v2 .artist-profile__bio-content p {
  margin: 0 0 var(--ds-number-12);       /* 24px — 공연·전시 상세 v3와 통일 (본문 단락 간격) */
}

.artist-detail-v2 .artist-profile__bio-content p:last-child {
  margin-bottom: 0;
}

.artist-detail-v2 .artist-profile__bio-content strong {
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-red-aa);
}


/* ── V03. 목록 버튼 ── */

.artist-detail-v2 .ds-detail-actions {
  padding-top: var(--ds-number-30);      /* 60px */
  text-align: center;
  margin-top: var(--ds-number-30);       /* 60px */
}

.artist-detail-v2 .ds-detail-actions .ds-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: var(--ds-number-20);       /* 40px */
  padding-inline: var(--ds-number-12);   /* 24px */
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-bold);
  letter-spacing: -0.01em;
}

.artist-detail-v2 .ds-detail-actions .ds-btn:first-child {
  background-color: transparent;
  color: var(--ds-comp-color);
  border: var(--ds-border-width-thin) solid var(--ds-comp-color);
}

.artist-detail-v2 .ds-detail-actions .ds-btn:first-child:hover {
  background-color: color-mix(in srgb, var(--ds-comp-color) 8%, white);
}


/* =====================================================================
   R. 반응형
   ===================================================================== */

/* 1440px 이하 — 히어로 + 섹션 타이틀 사이드 패딩 */
@media (max-width: 1440px) {
  .artist-detail-v2 .artist-profile__hero-inner {
    padding-inline: var(--ds-pc-padding-layout-side, 3rem);
  }
  .artist-detail-v2 .pfmc-subtitle-v3-inner {
    padding-inline: var(--ds-pc-padding-layout-side, 3rem);
  }
}

/* 태블릿 (768~1199px) */
@media (max-width: 1199px) {
  /* 목록 */
  .artist-list-v2 .ds-tab {
    margin-top: var(--ds-number-14);     /* 28px */
  }
  .artist-list-v2 .ds-tab + *,
  .artist-list-v2 .page-header__select + *,
  .artist-list-v2 .artist-apply-cta + * {
    margin-top: var(--ds-number-14);
  }

  .artist-list-v2 .artist-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--ds-number-12);     /* 24px */
    row-gap: var(--ds-number-20);        /* 40px */
  }

  .artist-list-v2 .artist-card__name {
    font-size: var(--ds-font-size-20);
  }

  /* 상세 */
  .artist-detail-v2 .artist-profile__hero-inner {
    gap: var(--ds-number-22);            /* 44px */
    padding-block: 8rem;                  /* 태블릿 80px — 공연·전시 상세 v3 케이스 C와 통일 (자체 명시) */
  }

  .artist-detail-v2 .artist-profile__hero-photo {
    width: 24rem;
    height: 30rem;
  }

  .artist-detail-v2 .artist-profile__name {
    font-size: var(--ds-font-size-36);
  }

  .artist-detail-v2 .pfmc-subtitle-v3__title {
    font-size: var(--ds-font-size-22);
  }
}

/* 모바일 (≤767px) */
@media (max-width: 767px) {
  /* 목록 — 모바일: 라인 탭 유지(좌측정렬+가로 스크롤은 DS page-header.css가 처리), select 미사용 */
  .artist-list-v2 .ds-tab {
    margin-top: var(--ds-number-8);
  }
  .artist-list-v2 .ds-tab + *,
  .artist-list-v2 .page-header__select + *,
  .artist-list-v2 .artist-apply-cta + * {
    margin-top: var(--ds-number-8);
  }

  .artist-list-v2 .ds-filter-search .ds-board-toolbar {
    max-width: 100%;
  }

  .artist-list-v2 .artist-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--ds-number-6);      /* 12px */
    row-gap: var(--ds-number-15);        /* 30px */
  }

  .artist-list-v2 .artist-card__body {
    padding: var(--ds-number-6);         /* 12px */
  }

  .artist-list-v2 .artist-card__name {
    font-size: var(--ds-font-size-15);
  }

  .artist-list-v2 .artist-card__genre {
    font-size: var(--ds-font-size-13);
  }

  .artist-list-v2 .artist-card__arrow svg {
    width: var(--ds-number-11);          /* 22px */
    height: var(--ds-number-11);
  }

  /* 상세 */
  .artist-detail-v2 .artist-profile__hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-number-12);            /* 24px */
    padding: 6rem var(--ds-mobile-padding-layout-side, 1.6rem);  /* 모바일 60px — 공연·전시 상세 v3 케이스 C와 통일 (자체 명시) */
  }

  .artist-detail-v2 .artist-profile__hero-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .artist-detail-v2 .artist-profile__hero-info {
    width: 100%;
  }

  .artist-detail-v2 .artist-profile__name {
    font-size: var(--ds-mobile-font-size-heading-large);  /* 28px */
  }

  .artist-detail-v2 .artist-profile__role {
    font-size: var(--ds-font-size-15);
  }

  .artist-detail-v2 .artist-profile__hero-meta dl {
    padding: 1rem 0;
  }

  .artist-detail-v2 .artist-profile__hero-meta dt {
    font-size: var(--ds-font-size-15);
    width: 8rem;
  }

  .artist-detail-v2 .artist-profile__hero-meta dd {
    font-size: var(--ds-font-size-15);
  }

  .artist-detail-v2 .pfmc-subtitle-v3-inner {
    padding-inline: var(--ds-mobile-padding-layout-side, 1.6rem);
  }

  .artist-detail-v2 .pfmc-subtitle-v3__title {
    font-size: var(--ds-mobile-font-size-heading-small, 1.8rem);
  }

  .artist-detail-v2 .artist-profile__bio-content {
    font-size: var(--ds-mobile-font-size-body-medium);   /* 16px */
  }
}

/* 탭 select 상시 숨김 — 본문 탭은 전 뷰포트 가로스크롤 탭 유지(모바일 select 미사용, 퍼블 page-header.css 전역숨김과 일치) */
.artist-list-v2 .page-header__select {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   090103 예술인·단체 신청페이지 PUB — 신청 폼 스타일
   SB(artist-page-V1_SB.css [support-apply] + 090103 SB <style> 예술인 추가필드)에서 그대로 이식 (2026-06-17)
   디자인 스타일: 회원정보수정(050102)과 동일 DS 폼 톤
   ════════════════════════════════════════════════════════════ */
/* [CUSTOM START: support-apply]
   지원사업 신청페이지(090203) 전용 — 신청자 정보·다중 업로드·약관 동의
   ──────────────────────────────────────────────────────────── */

/* 폼 카드 컨테이너 (mypage-edit-v3 패턴) */
.support-apply-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

/* 섹션 (V01·V02·V03) — 카드 X, 평면형 (mypage-edit-v3 패턴) */
.support-apply-section {
  width: 100%;
}
.support-apply-section + .support-apply-section {
  margin-top: var(--ds-number-30, 6rem);
}
.support-apply-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-3, 0.6rem);
  padding-bottom: var(--ds-number-6, 1.2rem);
  border-bottom: var(--ds-border-width-thin, 0.1rem) solid var(--ds-light-color-text-basic);
}
.support-apply-section__head + * {
  margin-top: var(--ds-number-8, 1.6rem);
}
.support-apply-section__title {
  font-size: var(--ds-font-size-24, 2.4rem);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-basic);
  margin: 0;
  line-height: var(--ds-typo-line-height-heading);
}
.support-apply-section__required {
  color: var(--ds-color-brand-red);
  margin-left: var(--ds-number-2, 0.4rem);
}
.support-apply-section__desc {
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-subtle);
  margin: var(--ds-number-6, 1.2rem) 0 0;
  line-height: var(--ds-typo-line-height-body);
}
.support-apply-section__body {
  margin-top: var(--ds-number-8, 1.6rem);
}

/* 라벨-값 폼 그리드 (V01) — mypage-info-table 톤 */
.ds-form-grid {
  display: flex;
  flex-direction: column;
}
.ds-form-grid__row {
  display: flex;
  align-items: center;
  padding: var(--ds-number-6, 1.2rem) 0;   /* 요소 간 세로 간격 확대(8→12, 행간 24px) */
}
/* 신청자 정보 섹션 행간 — 신청현황 상세(.mypage-info-table__row 8px)와 통일 */
.support-apply-section--info .ds-form-grid__row {
  padding: var(--ds-number-4, 0.8rem) 0;   /* 상하 8px (행간 16px) */
}
.ds-form-grid__label {
  flex-shrink: 0;
  width: 12rem;
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-subtle);
  font-weight: var(--ds-typo-font-weight-regular);
}
.ds-form-grid__field {
  flex: 1;
  min-width: 0;
}
.ds-form-grid__field .ds-input[readonly] {
  border: none;
  background-color: transparent;
  padding: 0;
  height: auto;                                          /* DS 기본 input 높이(4rem) 제거 → 신청자 정보 행을 대관 PUB 기준과 통일 */
  line-height: var(--ds-typo-line-height-body);
  color: var(--ds-light-color-text-basic);
  font-size: var(--ds-pc-font-size-body-medium);
  font-weight: var(--ds-typo-font-weight-medium);
  cursor: default;
}

/* 다중 파일 업로드 (V02) — 알바몬 스타일: [파일 선택] + N/10 + 첨부 목록 + 안내 */

.support-apply-files {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-5, 1rem);
}

/* 헤드: [파일 선택] 버튼 + 카운터 */
.support-apply-files__head {
  display: flex;
  align-items: center;
  gap: var(--ds-number-5, 1rem);
}
.support-apply-files__count {
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-color-brand-blue);
  font-weight: var(--ds-typo-font-weight-medium);
}

/* 첨부 파일 목록 (작은 행) */
.support-apply-files__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-2, 0.4rem);
}
.support-apply-files__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-3, 0.6rem);
  padding: var(--ds-number-3, 0.6rem) var(--ds-number-5, 1rem);
  border-radius: var(--ds-radius-small);
  background-color: var(--ds-light-color-surface-gray-subtler);
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-basic);
  width: fit-content;
  max-width: 100%;
}
.support-apply-files__filename {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-light-color-text-bolder);
}
.support-apply-files__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: var(--ds-light-color-text-subtle);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.support-apply-files__remove:hover {
  color: var(--ds-color-brand-red);
}
.support-apply-files__remove .ds-icon {
  background-color: currentColor;
}

/* 안내 텍스트 */
.support-apply-files__guide {
  list-style: disc;
  margin: var(--ds-number-6, 1.2rem) 0 0;
  padding: var(--ds-number-6, 1.2rem) var(--ds-number-6, 1.2rem) var(--ds-number-6, 1.2rem) var(--ds-number-14, 2.8rem);
  background: color-mix(in srgb, var(--ds-color-warning-5, #fff3db) 30%, transparent);   /* 신청서 안내 노란박스 — education/space 신청폼과 통일 */
  border-radius: var(--ds-radius-medium);
  font-size: var(--ds-font-size-14, 1.4rem);
  color: var(--ds-light-color-text-subtle);
  line-height: var(--ds-typo-line-height-body);
}
.support-apply-files__guide li { margin: 0; }
.support-apply-files__guide li::marker { color: var(--ds-color-gray-60, #58616a); }
.support-apply-files__guide--warn {
  color: var(--ds-color-brand-red);
}

/* 인라인 경고 (필수 누락 시 노출) */
.support-apply-upload__warn {
  display: flex;
  align-items: center;
  gap: var(--ds-number-3, 0.6rem);
  margin: var(--ds-number-3, 0.6rem) 0 0;
  padding: var(--ds-number-5, 1rem) var(--ds-number-6, 1.2rem);
  border: var(--ds-border-width-thin, 0.1rem) solid var(--ds-color-danger-10, #fcdfd9);
  border-radius: var(--ds-radius-medium);
  background-color: var(--ds-color-danger-5, #fdefec);
  color: var(--ds-color-brand-red);
  font-size: var(--ds-pc-font-size-body-small);
  font-weight: var(--ds-typo-font-weight-medium);
}
/* hidden 속성 시 숨김 — 경고는 [신청하기] 클릭 시에만 노출 (상시 노출 버그 수정) */
.support-apply-upload__warn[hidden] { display: none; }
/* 약관 경고 박스를 약관 영역 최상단(헤더 바로 아래)에 둘 때 간격 보정 — 인접선택자 회귀 방지 */
.support-apply-section__head + .support-apply-upload__warn { margin-top: var(--ds-number-8, 1.6rem); }
.support-apply-section__head + .support-apply-upload__warn + * { margin-top: var(--ds-number-8, 1.6rem); }
.support-apply-upload__warn::before {
  content: '!';
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background-color: var(--ds-color-brand-red);
  color: var(--ds-color-gray-0, #fff);
  font-size: var(--ds-pc-font-size-body-xsmall);
  font-weight: var(--ds-typo-font-weight-bold);
}

/* 약관 동의 (V04) — 회원가입 약관동의(020101 signup-agree-v3)와 시각 동일하도록 이식.
   출처: signup-page-V3.css `.signup-agree-v3 .join-terms-*` 규칙을 .support-apply-section 스코프로 이식
   (070201 대관신청 PUB와 동일 — 전체동의 원형 커스텀 체크박스 / 약관박스 24rem·20px / 타이틀 line-height 32px / letter-spacing -0.05em) */
.support-apply-section .join-terms-all {
  width: 100%;
  padding: 1.3rem var(--ds-number-12, 2.4rem);          /* 13px 24px — 출처와 동일 */
  border: var(--ds-border-width-thin) solid transparent;
  border-radius: var(--ds-radius-medium);
  background: color-mix(in srgb, var(--ds-color-secondary-5) 50%, transparent);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  margin-bottom: var(--ds-number-6, 1.2rem);
}
.support-apply-section .join-terms-all:hover { background: color-mix(in srgb, var(--ds-color-secondary-5) 80%, transparent); }
.support-apply-section .join-terms-all:has(input[type="checkbox"]:checked) {
  background-color: var(--ds-color-gray-0);
  border-color: var(--ds-color-brand-dark);
}
.support-apply-section .join-terms-all:has(input[type="checkbox"]:checked):hover {
  background-color: var(--ds-color-gray-5);
}
.support-apply-section .join-terms-all .ds-checkbox {
  display: flex; width: 100%; align-items: center;
  gap: var(--ds-number-6, 1.2rem); margin: 0; padding: 0;
}
/* 전체동의 체크박스 — 출처: 동그라미 dot(24px, gray-20 border, 회색 체크) */
.support-apply-section .join-terms-all .ds-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  flex-shrink: 0;
  width: var(--ds-number-12);                            /* 24px */
  height: var(--ds-number-12);
  margin: 0;
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
  border-radius: 50%;
  background-color: var(--ds-color-gray-0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6.5 5,9 10,3.5' fill='none' stroke='%238a949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 1.2rem 1.2rem;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.15s, border-color 0.15s;
  box-sizing: border-box;
}
/* 체크 상태 — dot brand-dark 배경 + 흰 체크 */
.support-apply-section .join-terms-all:has(input[type="checkbox"]:checked) .ds-checkbox input[type="checkbox"] {
  background-color: var(--ds-color-brand-dark);
  border-color: var(--ds-color-brand-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6.5 5,9 10,3.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.support-apply-section .join-terms-all__text {
  font-size: var(--ds-pc-font-size-body-medium);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-dark);
  letter-spacing: -0.05em;                               /* 출처와 동일 */
  line-height: var(--ds-number-12, 2.4rem);
  flex: 1;
}
.support-apply-section .join-divider {
  align-self: stretch;
  border: none;
  border-top: var(--ds-border-width-thin) solid var(--ds-light-color-divider-gray-light);
  margin: var(--ds-number-12, 2.4rem) 0;                  /* 24px 상하 — 약관 항목 간격 출처 020101(49px)과 동일 */
}
.support-apply-section .join-terms-all + .join-divider { display: none; }
.support-apply-section .join-terms-section {
  display: flex; flex-direction: column;
  gap: var(--ds-number-6, 1.2rem);
  padding: 0;                                            /* 약관 박스 풀폭 = divider폭 (출처 020101 signup-agree-v3 .join-terms-section과 동일, 좌우 들여쓰기 제거 — 박스가 24px 안쪽으로 밀려 divider보다 좁아지던 문제 수정) */
}
.support-apply-section .join-terms-title-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-number-4, 0.8rem);
}
.support-apply-section .join-terms-title-row .ds-checkbox {
  display: inline-flex; align-items: center;
  gap: var(--ds-number-6, 1.2rem); margin: 0; cursor: pointer;
}
.support-apply-section .join-terms-title {
  font-size: var(--ds-pc-font-size-body-medium);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-basic);
  line-height: var(--ds-number-16, 3.2rem); margin: 0;   /* 32px — 출처와 동일 */
  display: inline-flex; align-items: center; gap: var(--ds-number-2, 0.4rem);
}
.support-apply-section .join-terms-required {
  color: var(--ds-color-brand-red-aa);
  font-weight: var(--ds-typo-font-weight-bold);
}
.support-apply-section .join-terms-title-row .ds-checkbox input[type="checkbox"] { flex-shrink: 0; }
.support-apply-section .join-terms-box {
  width: 100%; height: 24rem; overflow-y: auto;          /* 240px — 출처와 동일 */
  border: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
  border-radius: var(--ds-radius-medium);
  padding: var(--ds-number-10, 2rem);                    /* 20px 균일 — 출처와 동일 */
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-basic);
  line-height: 1.7;
  scrollbar-width: thin;
  scrollbar-color: var(--ds-color-gray-30) transparent;
  scrollbar-gutter: stable;
}
.support-apply-section .join-terms-box p { margin: 0 0 var(--ds-number-3, 0.6rem); }
.support-apply-section .join-terms-box p:last-child { margin-bottom: 0; }
.support-apply-section .join-terms-box strong { color: var(--ds-light-color-text-bolder); }
.support-apply-section .join-terms-box::-webkit-scrollbar { width: 0.6rem; }
.support-apply-section .join-terms-box::-webkit-scrollbar-track { background: transparent; margin-block: var(--ds-number-4); }
.support-apply-section .join-terms-box::-webkit-scrollbar-thumb {
  background-color: var(--ds-color-gray-30);
  border-radius: 999px;
  border: 0.1rem solid transparent;
  background-clip: padding-box;
}
.support-apply-section .join-terms-box::-webkit-scrollbar-thumb:hover { background-color: var(--ds-color-gray-50); }
.support-apply-section .join-terms-box::-webkit-scrollbar-button { display: none; }

/* 약관 본문 표 — 출처: 위탁업체 표 스타일 동일 */
.support-apply-section .join-terms-table {
  width: 100%; border-collapse: collapse;
  margin: var(--ds-number-12, 2.4rem) 0;                 /* 24px 상하 — 출처와 동일 */
  font-size: var(--ds-pc-font-size-body-xsmall);
}
.support-apply-section .join-terms-table th,
.support-apply-section .join-terms-table td {
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
  padding: var(--ds-number-5, 1rem) var(--ds-number-6, 1.2rem);
  text-align: center; vertical-align: middle;
}
.support-apply-section .join-terms-table th {
  background-color: var(--ds-light-color-surface-gray-subtler);
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-light-color-text-basic);
}
/* thead↔tbody 경계 이중선(겹침) 방지 — 첫 tbody 행 상단 border 제거, 경계는 th 하단 1px 하나만 */
.support-apply-section .join-terms-table tbody tr:first-child td { border-top: 0; }

/* 파일 선택 버튼 — 출처 050102 섹션 액션 버튼과 동일 (brand-dark fill + 흰 글씨).
   050102: .mypage-edit-v3 .mypage-section__header .ds-btn → brand-dark bg/border, gray-0 text.
   070201은 .ds-file-upload .ds-btn 한 곳 — 090103은 신청서 업로드(.ds-file-upload)와 프로필 이미지(.support-apply-profile__button) 두 곳 모두 동일 적용 */
.support-apply-section .ds-file-upload .ds-btn,
.support-apply-section .support-apply-profile__button {
  background-color: var(--ds-color-brand-dark);
  border-color: var(--ds-color-brand-dark);
  color: var(--ds-color-gray-0);
}
.support-apply-section .ds-file-upload .ds-btn:hover,
.support-apply-section .support-apply-profile__button:hover {
  background-color: var(--ds-color-brand-dark-aa);
  border-color: var(--ds-color-brand-dark-aa);
}

/* 첨부 파일명 — DS 기본(.ds-file-upload__file = body-xsmall 14px)에서 한 단계 키움 (17px, 가독성 향상) */
.support-apply-section .ds-file-upload__file-name {
  font-size: var(--ds-font-size-17, 1.7rem);
}

/* 하단 액션 */
.support-apply-actions {
  display: flex;
  justify-content: center;
  gap: var(--ds-number-4, 0.8rem);                       /* 8px — 출처 050102 하단 버튼행과 동일 */
  /* 버튼 위 여백은 DS .ds-detail-actions(margin-top 100/80/60, 케이스 C)에 위임 — override 제거 */
}

.support-apply-selects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-number-4, 0.8rem);
}

@media (max-width: 767px) {
  .support-apply-selects {
    grid-template-columns: 1fr;
  }
}
/* line-height 통일 — 취소(<a>, 상속 1.6)와 신청하기(<button>, normal)의 버튼 높이 불일치 방지 */
.support-apply-actions .ds-btn {
  line-height: var(--ds-typo-line-height-body);
}
/* 신청/확인(primary)만 16rem 유지 — 주 액션 강조 */
.support-apply-actions .ds-btn--primary {
  min-width: 16rem;
}
/* 취소 버튼 — 출처 050102 하단 취소와 동일: outline (transparent bg + brand-dark border/text).
   050102: .mypage-edit-v3 .mypage-bottom-actions .ds-btn:not(.ds-btn--primary).
   신청하기(확인) = .ds-btn--primary primary 파랑(#027BC1) 그대로 유지.
   가로 폭: 취소(보조 액션)는 12rem로 짧게, primary는 위 16rem 유지 */
.support-apply-actions .ds-btn:not(.ds-btn--primary) {
  min-width: 12rem;
  background-color: transparent;
  border-color: var(--ds-color-brand-dark);
  color: var(--ds-color-brand-dark);
}
.support-apply-actions .ds-btn:not(.ds-btn--primary):hover {
  background-color: color-mix(in srgb, var(--ds-color-brand-dark) 6%, transparent);
}

/* 모바일 */
@media (max-width: 767px) {
  .support-apply-section + .support-apply-section {
    margin-top: var(--ds-number-12, 2.4rem);
  }
  .support-apply-section__title {
    font-size: var(--ds-mobile-font-size-heading-small, 1.6rem);
  }
  .ds-form-grid__label {
    width: 9rem;
  }
  .ds-form-grid__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-number-2, 0.4rem);
  }
  .support-apply-files__head {
    flex-wrap: wrap;
  }
  .support-apply-files__item {
    width: 100%;
  }
  .support-apply-agreement__row {
    padding: var(--ds-number-4, 0.8rem) var(--ds-number-6, 1.2rem);
  }
  .support-apply-actions {
    flex-direction: column;
  }
  .support-apply-actions .ds-btn {
    width: 100%;
    min-width: 0;
  }
}
/* [CUSTOM END: support-apply] */

/* ── 예술인 추가 필드(라디오·프로필·분류 select·에디터·SNS·서식칩) — 090103 SB <style>에서 이식 ── */
    /* 약관 본문 표(.join-terms-table)는 위 .support-apply-section 스코프 규칙(070201 이식분)으로 통합 — 중복 정의 제거 */

    /* 라벨 수직 정렬 — 입력 영역이 여러 줄인 행에서 좌측 라벨을 상단에 맞춤 */
    .sub-page-wrap .ds-form-grid__row--align-top { align-items: flex-start; }

    /* 프로필 이미지 업로드 — 입력필드(파일명 표시) + 우측 [파일 선택] 버튼 가로 배치
       입력필드 외형(배경·테두리·반경·패딩)은 DS .ds-input 컴포넌트가 소유 — 여기선 레이아웃만 */
    .sub-page-wrap .support-apply-profile { display: block; }
    .sub-page-wrap .support-apply-profile__input-row { display: flex; align-items: center; gap: var(--ds-number-5, 1rem); }
    .sub-page-wrap .support-apply-profile__input-row .ds-input { flex: 1 1 0; min-width: 0; }
    /* 첨부 파일명 — placeholder 톤(비활성 텍스트색)으로 표시. 배경/테두리는 DS readonly가 소유 */
    /* 프로필 파일명 input — Figma대로 테두리 있는 텍스트박스(흰 bg·gray-20 border·radius6·h40). 공통 readonly의 border:none 무력화 */
    .sub-page-wrap .support-apply-profile__input-row .ds-input[readonly] { height: 4rem; box-sizing: border-box; padding: 0 var(--ds-number-7, 1.3rem); border: var(--ds-border-width-thin, 1px) solid var(--ds-color-gray-20, #cdd1d5); border-radius: var(--ds-radius-medium); background: var(--ds-color-gray-0, #fff); font-size: var(--ds-font-size-16, 1.6rem); color: var(--ds-light-color-text-disabled); cursor: default; }
    .sub-page-wrap .support-apply-profile__button { flex: 0 0 auto; }
    /* 3:4 비율·허용형식 안내 — Figma 연노랑 박스(warning-5 30%) + disc 불릿 */
    .sub-page-wrap .support-apply-profile__guide { list-style: disc; margin: var(--ds-number-6, 1.2rem) 0 0; padding: var(--ds-number-6, 1.2rem) var(--ds-number-6, 1.2rem) var(--ds-number-6, 1.2rem) var(--ds-number-14, 2.8rem); background: color-mix(in srgb, var(--ds-color-warning-5, #fff3db) 30%, transparent); border-radius: var(--ds-radius-medium); font-size: var(--ds-font-size-14, 1.4rem); color: var(--ds-light-color-text-subtle); line-height: var(--ds-typo-line-height-body); }
    .sub-page-wrap .support-apply-profile__guide li { margin: 0; }
    .sub-page-wrap .support-apply-profile__guide li::marker { color: var(--ds-color-gray-60, #58616a); }

    /* 세부장르·활동지역 — 대·중·소 / 대·소 select 가로 배치 (단일 선택)
       select 외형(테두리·배경·화살표·disabled)은 DS .ds-select 컴포넌트가 소유 — 여기선 레이아웃·단계 구분자(›)만.
       (disabled 배경/화살표 회색 처리는 DS .ds-select:disabled 가 담당) */
    .sub-page-wrap .support-apply-selects { display: flex; align-items: center; gap: var(--ds-number-4, 0.8rem); flex-wrap: wrap; }
    .sub-page-wrap .support-apply-selects > .ds-select { flex: 1 1 0; min-width: 14rem; }
    .sub-page-wrap .support-apply-selects__sep { flex: 0 0 auto; color: var(--ds-light-color-text-subtle); font-size: var(--ds-number-9, 1.8rem); line-height: 1; user-select: none; }

    /* 예술인 소개 에디터 영역 (외곽 박스 = 툴바 + textarea, qa-write-editor 패턴 이식) */
    .sub-page-wrap .support-apply-editor__box { display: flex; flex-direction: column; min-height: 24rem; border: var(--ds-border-width-thin) solid var(--ds-light-color-input-border); border-radius: var(--ds-radius-small); padding: var(--ds-number-8, 1.6rem); background: var(--ds-light-color-input-surface); }
    .sub-page-wrap .support-apply-editor__box:focus-within { border-color: var(--ds-light-color-input-border-active); }
    /* 툴바 — 박스 상단에 꽉 차게 (좌우/상단 패딩을 음수 마진으로 상쇄) + 서식 버튼 가로 행 */
    .sub-page-wrap .support-apply-editor__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-number-1, 0.2rem); background: var(--ds-color-secondary-5); border-bottom: var(--ds-border-width-thin) solid var(--ds-light-color-input-border); padding: var(--ds-number-3, 0.6rem) var(--ds-number-4, 0.8rem); margin: calc(-1 * var(--ds-number-8, 1.6rem)) calc(-1 * var(--ds-number-8, 1.6rem)) var(--ds-number-6, 1.2rem); border-radius: var(--ds-radius-small) var(--ds-radius-small) 0 0; }
    .sub-page-wrap .support-apply-editor__tool { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ds-number-14, 2.8rem); height: var(--ds-number-14, 2.8rem); padding: 0 var(--ds-number-2, 0.4rem); border-radius: var(--ds-radius-small); font-size: var(--ds-font-size-15, 1.5rem); font-weight: var(--ds-typo-font-weight-bold); color: var(--ds-light-color-text-subtle); cursor: pointer; user-select: none; }
    .sub-page-wrap .support-apply-editor__tool:hover { background-color: var(--ds-color-gray-10); color: var(--ds-light-color-text-basic); }
    .sub-page-wrap .support-apply-editor__divider { width: var(--ds-border-width-thin); height: var(--ds-number-8, 1.6rem); background-color: var(--ds-light-color-input-border); margin: 0 var(--ds-number-2, 0.4rem); }

    /* SNS URL — 아이콘 prefix 형태 입력필드 (입력필드 외형은 DS .ds-input 소유, 좌측 패딩만 아이콘 자리 확보) */
    .sub-page-wrap .support-apply-sns { display: flex; flex-direction: column; gap: var(--ds-number-5, 1rem); }
    .sub-page-wrap .support-apply-sns__row { position: relative; }
    .sub-page-wrap .support-apply-sns__row .ds-input { padding-left: 4.6rem; }
    .sub-page-wrap .support-apply-sns__icon { position: absolute; left: var(--ds-number-6, 1.2rem); top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: var(--ds-number-12, 2.4rem); height: var(--ds-number-12, 2.4rem); pointer-events: none; color: var(--ds-light-color-text-subtle); }
    .sub-page-wrap .support-apply-sns__icon svg { width: 100%; height: 100%; }

    /* 신청서 서식 다운로드 — 여러 개 서식을 가로 wrap 칩으로 (스크롤 최소화) */
    .sub-page-wrap .support-apply-formfiles { display: flex; flex-wrap: wrap; gap: var(--ds-number-4, 0.8rem); }
    .sub-page-wrap .support-apply-formfiles__item { display: inline-flex; align-items: center; gap: var(--ds-number-3, 0.6rem); max-width: 100%; min-width: 0; padding: var(--ds-number-4, 0.8rem) var(--ds-number-6, 1.2rem); border: var(--ds-border-width-thin) solid var(--ds-light-color-input-border); border-radius: var(--ds-radius-small); background: var(--ds-light-color-input-surface); font-size: var(--ds-pc-font-size-body-small); color: var(--ds-light-color-text-basic); text-decoration: none; transition: border-color .15s, background-color .15s; }
    .sub-page-wrap .support-apply-formfiles__item:hover { border-color: var(--ds-color-brand-blue); background: var(--ds-color-secondary-5); }
    .sub-page-wrap .support-apply-formfiles__icon,
    .sub-page-wrap .support-apply-formfiles__dl { flex: 0 0 auto; display: inline-flex; width: var(--ds-number-8, 1.6rem); height: var(--ds-number-8, 1.6rem); color: var(--ds-light-color-text-subtle); }
    .sub-page-wrap .support-apply-formfiles__icon svg,
    .sub-page-wrap .support-apply-formfiles__dl svg { width: 100%; height: 100%; }
    .sub-page-wrap .support-apply-formfiles__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    /* 신청서 서식 칩 문서 아이콘 — 인라인 SVG를 DS 외부 아이콘으로 교체(모양·크기 동일: 모서리 접힌 문서, 16px) */
    .ds-icon--file {
      -webkit-mask-image: url(../../icons/file-04.svg);
      mask-image: url(../../icons/file-04.svg);
    }

    /* 신청 유형 라디오 그룹 — 가로 배치 */
    .sub-page-wrap .support-apply-radio-group { display: flex; align-items: center; gap: var(--ds-number-12, 2.4rem); flex-wrap: wrap; }
    /* 신청 유형별 전용 행 — 비선택 시 숨김 (단체명=예술단체 / 예술인명=예술인) */
    .sub-page-wrap .support-apply-group-only[hidden],
    .sub-page-wrap .support-apply-artist-only[hidden] { display: none; }
    /* 신청자명 — 입력필드 없이 텍스트만 출력 (로그인 이름, 수정 불가) */
    .sub-page-wrap .support-apply-readonly-value { margin: 0; padding: 0; min-height: 4rem; display: flex; align-items: center; font-size: var(--ds-pc-font-size-body-medium); font-weight: var(--ds-typo-font-weight-medium); color: var(--ds-light-color-text-basic); line-height: var(--ds-typo-line-height-body); }   /* 높이를 입력칸(4rem)과 통일 — 신청유형·신청자명 행이 다른 항목과 같은 세로 길이 */

    @media (max-width: 767px) {
      .sub-page-wrap .support-apply-selects { flex-direction: column; align-items: stretch; }
      .sub-page-wrap .support-apply-selects__sep { display: none; }
      /* 모바일 위계 — ① align-top 행도 필드 풀폭(단체소개·SNS 우측 남음 해소) */
      .sub-page-wrap .ds-form-grid__row--align-top { align-items: stretch; }
      .sub-page-wrap .support-apply-editor__box,
      .sub-page-wrap .support-apply-sns,
      .sub-page-wrap .support-apply-sns__row .ds-input { width: 100%; }
      /* ② 텍스트 위계 축소(라벨16→14·프로필16→14·파일명17→14·안내14→13·소개16→14) */
      .sub-page-wrap .ds-form-grid__label { font-size: var(--ds-font-size-14, 1.4rem); }
      .sub-page-wrap .support-apply-profile__input-row .ds-input[readonly] { font-size: var(--ds-font-size-14, 1.4rem); }
      .sub-page-wrap .support-apply-profile__guide { font-size: var(--ds-font-size-13, 1.3rem); }
      .sub-page-wrap .support-apply-editor__box .support-apply-editor__textarea { font-size: var(--ds-font-size-14, 1.4rem); }
      .sub-page-wrap .support-apply-section .ds-file-upload__file-name,
      .sub-page-wrap .support-apply-profile .ds-file-upload__file-name { font-size: var(--ds-font-size-14, 1.4rem); }
      /* ③ 신청서 서식칩·업로드 안내·파일선택 버튼·약관 본문 위계 축소 */
      .sub-page-wrap .support-apply-formfiles__item,
      .sub-page-wrap .support-apply-formfiles__name { font-size: var(--ds-font-size-13, 1.3rem); }
      .sub-page-wrap .ds-file-upload__name { font-size: var(--ds-font-size-14, 1.4rem); }
      .sub-page-wrap .support-apply-section .ds-file-upload .ds-btn,
      .sub-page-wrap .support-apply-profile__button { font-size: var(--ds-font-size-14, 1.4rem); }
      .sub-page-wrap .join-terms-title { font-size: var(--ds-font-size-15, 1.5rem); }
      .sub-page-wrap .join-terms-box p { font-size: var(--ds-font-size-14, 1.4rem); }
      .sub-page-wrap .join-terms-table th,
      .sub-page-wrap .join-terms-table td { font-size: var(--ds-font-size-13, 1.3rem); }
      /* ④ 신청자 정보 표시값(홍길동·휴대폰·이메일) — 회원정보수정 기준 모바일 축소 */
      .sub-page-wrap .support-apply-readonly-value,
      .sub-page-wrap .support-apply-section .ds-form-grid__field > .ds-input[readonly] { font-size: var(--ds-mobile-font-size-body-medium); }
      /* 신청자 정보(표시값) 행 간격 — 회원정보수정(050102)과 동일 타이트(4px) */
      .sub-page-wrap .support-apply-section--info .ds-form-grid__row { padding: var(--ds-number-2, 0.4rem) 0; }
    }
/* 단체 소개 에디터 내부 textarea — SB 인라인 style 외부화 */
.sub-page-wrap .support-apply-editor__textarea { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; resize: vertical; outline: 0; padding: 0; background: transparent; font-family: inherit; font-size: var(--ds-font-size-16, 1.6rem); color: inherit; }


/* [CUSTOM START: support-apply-payment] 090203 지원사업 신청 — 대관 PUB(space) 기준 통일
   · 신청서 첨부 라벨 상단 정렬(--top, 대관 PUB과 동일) · 결제 정보 영역(SB 인라인 외부화) */
.sub-page-wrap .ds-form-grid__row--top { align-items: flex-start; }
.sub-page-wrap .ds-form-grid__row--top > .ds-form-grid__label { min-height: var(--ds-number-20, 4rem); display: flex; align-items: center; }
.sub-page-wrap .edu-apply-payment { padding: 0.5rem 0; }
.sub-page-wrap .edu-apply-payment .ds-form-grid__field { line-height: 1.7; }
/* 입금 안내 라벨 — 값(여러 줄) 첫 줄과 세로 상단 정렬 (--top 기본 min-height 4rem 중앙 무시) */
.sub-page-wrap .edu-apply-payment .ds-form-grid__row--top > .ds-form-grid__label { min-height: 0; align-items: flex-start; }
/* [CUSTOM END: support-apply-payment] */


/* [CUSTOM START: support-complete]
   신청완료페이지(090104) 전용 — 완료 안내(confetti 이미지 + 문구) + [신청 내역 보러가기]
   SB(artist-page-V1_SB.css [support-complete] + 090104 SB <style>)에서 이식 (2026-06-18)
   · 완료 아이콘은 인라인 SVG → confetti <img>로 교체(사용자 요청)되어 __icon 규칙을 img 기준으로 조정
   · 카드 박스(배경/보더/그림자/max-width)는 090104 SB <style>의 .support-complete 박스 규칙 반영
   ──────────────────────────────────────────────────────────── */
.sub-page-wrap--complete { margin-top: 0; }                           /* 서브컨텐츠 상단 갭 0 (이 페이지 한정 — 공통 .sub-page-wrap 100px 무시) */
.sub-page-wrap .support-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-10, 2rem);
  max-width: 64rem;
  margin: 0 auto var(--ds-number-20, 4rem);             /* 상단 갭 0 — top margin 제거(공통 wrap collapse 방지), 하단 여백 유지 */
  padding: 0 var(--ds-number-20, 4rem) var(--ds-number-30, 6rem);  /* 박스 제거 — 배경/보더/그림자 없음 · 상단 패딩 0(사용자 요청) */
  text-align: center;
}
.sub-page-wrap .support-complete__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -2.4rem;                                /* 아이콘↔타이틀 갭 2→-4px (flex gap 20 + (-24), 사용자 요청 더 붙임) */
}
.sub-page-wrap .support-complete__icon img {
  display: block;
  width: 24rem;                                          /* 120 → 240 (사용자 요청: 더 키움 ×2) */
  height: 24rem;
}
.sub-page-wrap .support-complete__title {
  margin: 0;
  font-size: var(--ds-pc-font-size-heading-medium);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
  line-height: var(--ds-typo-line-height-heading);
}
.sub-page-wrap .support-complete__title-accent { color: var(--ds-light-color-text-bolder); }   /* "접수" — 검은색 (타이틀과 동일, 사용자 요청) */
.sub-page-wrap .support-complete__desc {
  margin: 0;
  font-size: var(--ds-pc-font-size-body-medium);         /* body-large → medium (1단계 ↓, 사용자 요청) */
  color: var(--ds-color-gray-60);                        /* 설명 폰트 그레이 60 (사용자 요청) */
  line-height: var(--ds-typo-line-height-body);
}
.sub-page-wrap .support-complete__desc strong {
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-60);                        /* 마이페이지>예술인 신청 현황 — 본문과 그레이 60 통일 (사용자 요청) */
}
.sub-page-wrap .support-complete__actions {
  margin-top: var(--ds-number-10, 2rem);
}
.sub-page-wrap .support-complete__actions .ds-btn {
  min-width: 18rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-4, 0.8rem);
  background: #027bc1;                                   /* 솔리드 파랑 버튼 (사용자 요청) */
  /* border-color: var(--ds-color-brand-dark); */
  color: #ffffff;
}
.sub-page-wrap .support-complete__actions .ds-btn:hover {
  background: color-mix(in srgb, #027bc1 88%, #000);     /* 솔리드에 맞춰 약간 어둡게 */
}
.sub-page-wrap .support-complete__btn-icon {
  width: var(--ds-number-9, 1.8rem);
  height: var(--ds-number-9, 1.8rem);
  flex-shrink: 0;
  background-color: currentColor;                        /* 라인 아이콘 — currentColor로 버튼 텍스트색과 일치 */
  -webkit-mask: url(../../img/chevron-right.svg) no-repeat center / contain;
  mask: url(../../img/chevron-right.svg) no-repeat center / contain;
}

/* 모바일 */
@media (max-width: 767px) {
  .sub-page-wrap .support-complete {
    margin: 0 auto var(--ds-number-12, 2.4rem);
    padding: 0 var(--ds-number-12, 2.4rem) var(--ds-number-15, 3rem);
    gap: var(--ds-number-8, 1.6rem);
  }
  .sub-page-wrap--complete { margin-top: 0; }                          /* 모바일 상단 갭도 0 */
  .sub-page-wrap .support-complete__icon img {
    width: 20rem;                                        /* 모바일 아이콘도 확대 */
    height: 20rem;
  }
  .sub-page-wrap .support-complete__title {
    font-size: var(--ds-mobile-font-size-heading-medium, 1.8rem);
  }
  .sub-page-wrap .support-complete__desc {
    font-size: var(--ds-mobile-font-size-body-small, 1.3rem);
  }
  .sub-page-wrap .support-complete__actions .ds-btn {
    width: 100%;
    min-width: 0;
  }
}
/* [CUSTOM END: support-complete] */


/* ============================================================
   오픈큐브 작가소개 (MNU-U-090300) — 관리자 등록 안내 이미지 1건
   req: 가로 100% 기준 원본 비율 유지, 단일 이미지 그대로 노출 (링크·확대 없음)
   ============================================================ */
.opencube-image {
  width: 100%;
}
.opencube-image img {
  width: 100%;
  height: auto;
  display: block;
}
/* 등록 이미지 미존재 시 안내 문구 (req F01 처리규칙) */
.opencube-image__empty {
  padding: var(--ds-number-30) var(--ds-number-10);       /* 60px 20px */
  text-align: center;
  color: var(--ds-light-color-text-subtle);
  background: var(--ds-color-secondary-5);
  border-radius: var(--ds-radius-large);
  font-size: var(--ds-font-size-16);
}