/* 기본 설정 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #EAF8F4;
  color: #393D38;
  font-family: Arial, "Noto Sans KR", sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

/* 공통 헤더 */
.main-header {
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #DDECE5;
}

.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  cursor: pointer;
}

.logo-small {
  display: block;
  color: #78B99F;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 3px;
}

.logo h1 {
  margin: 4px 0 0;
  color: #466B5C;
  font-size: 22px;
}

.admin-link {
  padding: 9px 18px;
  border: 1px solid #C8DFD4;
  border-radius: 20px;
  background: #FFFFFF;
  color: #587A6A;
  font-size: 12px;
}

.admin-link:hover {
  background: #E7F4ED;
}

/* 메인 컨테이너 */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 24px 70px;
}

/* 메인 소개 */
.hero {
  padding: 55px 20px 45px;
  text-align: center;
}

.hero-subtitle {
  margin: 0 0 12px;
  color: #7EB69D;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 3px;
}

.hero h2 {
  margin: 0 0 14px;
  color: #456B5B;
  font-size: 32px;
}

.hero > p:last-child {
  margin: 0;
  color: #89968E;
  font-size: 14px;
}

/* 입력 영역 */
.form-section {
  max-width: 620px;
  margin: 0 auto 40px;
  padding: 25px;
  border: 1px solid #DCEBE3;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 5px 20px rgba(76, 122, 101, 0.05);
}

label {
  display: block;
  margin-bottom: 8px;
  color: #587466;
  font-size: 13px;
  font-weight: bold;
}

input[type="text"],
input[type="password"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #DCE8E1;
  border-radius: 10px;
  outline: none;
  background: #FBFDFC;
  color: #414A44;
  font-size: 13px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #8CC9AE;
  box-shadow: 0 0 0 3px rgba(140, 201, 174, 0.13);
}

/* 추천 코디 */
.recommendation-section {
  margin: 40px 0 55px;
  padding: 35px 25px;
  border: 1px solid #DCEBE3;
  border-radius: 22px;
  background: #FFFFFF;
}

.recommendation-heading {
  margin-bottom: 25px;
  text-align: center;
}

.recommendation-heading h2 {
  margin: 0 0 10px;
  color: #4C705F;
  font-size: 24px;
}

.recommendation-heading > p:last-child {
  color: #929B94;
  font-size: 13px;
}

.polaroid-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.polaroid-card {
  padding: 12px 12px 18px;
  border: 1px solid #E8E8E2;
  background: #FFFFFF;
  box-shadow: 0 5px 15px rgba(60, 80, 65, 0.09);
  transform: rotate(-1deg);
  transition: transform 0.2s, box-shadow 0.2s;
}

.polaroid-card:nth-child(even) {
  transform: rotate(1deg);
}

.polaroid-card:hover {
  z-index: 2;
  transform: translateY(-5px) rotate(0deg);
  box-shadow: 0 10px 22px rgba(60, 80, 65, 0.13);
}

.polaroid-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #F1F5F2;
}

.polaroid-card strong {
  display: block;
  margin: 13px 2px 5px;
  color: #526E5F;
  font-size: 14px;
}

.polaroid-card p {
  margin: 0 2px;
  color: #929B94;
  font-size: 11px;
  line-height: 1.5;
}

/* 랜덤 코디 */
.random-section {
  margin: 45px 0;
  padding: 35px 25px;
  border: 1px solid #DCEBE3;
  border-radius: 22px;
  background: #F8FCF9;
}

.random-heading {
  margin-bottom: 25px;
  text-align: center;
}

.random-heading h2 {
  margin: 0 0 10px;
  color: #4C705F;
  font-size: 24px;
}

.random-heading > p:last-child {
  color: #929B94;
  font-size: 13px;
}

.random-result {
  padding: 25px;
  border-radius: 16px;
  background: #FFFFFF;
}

.random-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.random-item {
  min-width: 0;
  text-align: center;
}

.random-item-image {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #F1F6F2;
}

.random-item-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.random-item-image span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
  color: #5B806D;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
}

.random-item > p {
  min-height: 35px;
  margin: 10px 0;
  color: #66786D;
  font-size: 12px;
}

.random-part-button {
  width: 100%;
  padding: 10px 6px;
  border: 1px solid #CDE3D7;
  border-radius: 9px;
  background: #F4FAF6;
  color: #5B806D;
  font-size: 11px;
}

.random-part-button:hover {
  background: #E5F4EB;
}

.random-status {
  margin: 22px 0 15px;
  color: #83958A;
  font-size: 12px;
  text-align: center;
}

.random-main-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.random-button,
.random-apply-button {
  padding: 15px 10px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
  transition: 0.2s;
}

.random-button {
  background: #69B99C;
  color: #FFFFFF;
}

.random-button:hover {
  background: #4FA487;
}

.random-apply-button {
  background: #DDF3EC;
  color: #526C5B;
}

.random-apply-button:hover {
  background: #C8EBDD;
}

.random-button:disabled,
.random-apply-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.random-help {
  margin: 17px 0 0;
  color: #92968F;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

/* 선택 영역 */
.selection-section {
  margin: 45px 0;
  padding: 28px;
  border: 1px solid #DCEBE3;
  border-radius: 18px;
  background: #FFFFFF;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.section-heading > span {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #E5F4EB;
  color: #61977C;
  font-size: 12px;
  font-weight: bold;
}

.section-heading h3 {
  margin: 0 0 5px;
  color: #587A68;
  font-size: 17px;
  letter-spacing: 2px;
}

.section-heading p {
  margin: 0;
  color: #9AA49D;
  font-size: 12px;
}

.selection-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 22px;
  align-items: start;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.image-card {
  overflow: hidden;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #F7FAF8;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

.image-card:hover {
  transform: translateY(-3px);
}

.image-card.selected {
  border-color: #70B99A;
  background: #F0FAF4;
}

.image-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.2;
  border-radius: 8px;
  object-fit: cover;
  background: #E8F0EB;
}

.image-card p {
  overflow: hidden;
  margin: 9px 2px 3px;
  color: #61766A;
  font-size: 11px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-box {
  position: sticky;
  top: 20px;
  padding: 15px;
  border: 1px solid #E0ECE5;
  border-radius: 13px;
  background: #F8FCF9;
  text-align: center;
}

.preview-box > p {
  margin: 0 0 12px;
  color: #789080;
  font-size: 12px;
  font-weight: bold;
}

.preview-box img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.2;
  border-radius: 9px;
  object-fit: cover;
  background: #EAF2ED;
}

.preview-box span {
  display: block;
  margin-top: 10px;
  color: #61766A;
  font-size: 12px;
}

/* 이미지 미선택 플레이스홀더 */
.image-placeholder {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px 10px;
  border: 1px dashed #C7DED1;
  border-radius: 10px;
  background: #EAF8F2;
  color: #648573;
  text-align: center;
  overflow: hidden;
}

.image-placeholder .placeholder-icon {
  display: flex;
  width: 43px;
  height: 43px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #D8EEE2;
  color: #78AB91;
  font-size: 29px;
  line-height: 1;
}

.image-placeholder strong {
  display: block;
  color: #648573;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.5;
  word-break: keep-all;
}

.image-placeholder small {
  display: block;
  color: #98AEA0;
  font-size: 9px;
  line-height: 1.4;
  word-break: keep-all;
}

/* 랜덤 코디 플레이스홀더 */
.random-item-image .image-placeholder {
  aspect-ratio: 4 / 5;
  border: none;
  border-radius: 0;
  padding: 12px 5px;
}

/* 선택 이미지 미리보기 플레이스홀더 */
.preview-box .image-placeholder {
  aspect-ratio: 1 / 1.2;
  border-radius: 9px;
  padding: 12px 8px;
}

/* 실제 이미지 표시 시 플레이스홀더 숨김 */
.image-placeholder.hidden {
  display: none !important;
}

/* 요청사항 */
.request-section {
  margin: 45px 0 25px;
  padding: 28px;
  border: 1px solid #DCEBE3;
  border-radius: 18px;
  background: #FFFFFF;
}

.request-section h3 {
  margin: 0 0 8px;
  color: #587A68;
  font-size: 17px;
  letter-spacing: 2px;
}

.request-section > p {
  margin: 0 0 18px;
  color: #9AA49D;
  font-size: 12px;
}

.request-section textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.request-help {
  margin-top: 8px;
  color: #9AA49D;
  font-size: 11px;
}

/* 제출 버튼 */
.submit-button {
  display: block;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  background: #69B99C;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  transition: background 0.2s;
}

.submit-button:hover {
  background: #4FA487;
}

.submit-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.footer-text {
  margin: 35px 0 0;
  color: #A8B6AC;
  font-size: 10px;
  letter-spacing: 3px;
  text-align: center;
}

/* 빈 목록 */
.empty-message {
  grid-column: 1 / -1;
  padding: 25px 10px;
  color: #A0AAA3;
  font-size: 13px;
  text-align: center;
}

/* 관리자 화면 */
.admin-container {
  max-width: 950px;
  margin: 0 auto;
  padding: 25px 0;
}

.admin-heading {
  margin: 20px 0 30px;
  text-align: center;
}

.admin-heading h2 {
  margin: 0 0 10px;
  color: #4C705F;
  font-size: 26px;
}

.admin-heading > p:last-child {
  color: #8D9A91;
  font-size: 13px;
}

.admin-card {
  margin: 22px 0;
  padding: 25px;
  border: 1px solid #DCEBE3;
  border-radius: 16px;
  background: #FFFFFF;
}

.admin-card h3 {
  margin: 0 0 18px;
  color: #587A68;
  font-size: 17px;
}

.admin-card label {
  margin-top: 15px;
}

.admin-card input,
.admin-card select,
.admin-card textarea {
  margin-bottom: 10px;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}

.admin-toolbar h3 {
  margin: 0 0 5px;
}

.admin-toolbar p {
  margin: 0;
  color: #929D95;
  font-size: 12px;
}

.small-button {
  padding: 9px 14px;
  border: 1px solid #CDE1D5;
  border-radius: 9px;
  background: #F5FAF7;
  color: #5F806E;
  font-size: 11px;
}

.small-button:hover {
  background: #E8F5ED;
}

.help-text {
  margin: 12px 0 0;
  color: #929D95;
  font-size: 11px;
  line-height: 1.6;
}

/* 업로드 미리보기 */
.upload-preview {
  display: none;
  margin: 15px 0;
  padding: 15px;
  border: 1px dashed #C9DED2;
  border-radius: 12px;
  background: #F8FCF9;
  text-align: center;
}

.upload-preview p {
  margin: 0 0 12px;
  color: #83958A;
  font-size: 12px;
}

.upload-preview img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: contain;
}

/* 관리자 이미지 목록 */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 15px 0;
}

.category-tabs button {
  padding: 8px 15px;
  border: 1px solid #D7E7DD;
  border-radius: 20px;
  background: #F7FBF8;
  color: #6E8979;
  font-size: 11px;
}

.category-tabs button:hover {
  background: #E6F4EB;
}

.admin-image-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.admin-image-card {
  overflow: hidden;
  padding: 10px;
  border: 1px solid #E1ECE5;
  border-radius: 12px;
  background: #FAFCFA;
  text-align: center;
}

.admin-image-card img {
  width: 100%;
  aspect-ratio: 1 / 1.1;
  border-radius: 8px;
  object-fit: cover;
}

.admin-image-card span {
  display: block;
  margin-top: 9px;
  color: #8A9B90;
  font-size: 10px;
}

.admin-image-card p {
  margin: 6px 0 10px;
  color: #5E7668;
  font-size: 12px;
}

.delete-button {
  padding: 8px 12px;
  border: 1px solid #E8CACA;
  border-radius: 8px;
  background: #FFF7F6;
  color: #B66C68;
  font-size: 11px;
}

.delete-button:hover {
  background: #FCEBE9;
}

/* 신청 내역 */
.submission-count {
  margin: 0 0 15px;
  color: #7B9384;
  font-size: 12px;
}

.submission-card {
  margin: 15px 0;
  padding: 18px;
  border: 1px solid #E1ECE5;
  border-radius: 12px;
  background: #FAFCFA;
}

.submission-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.submission-heading h4 {
  margin: 0;
  color: #567362;
  font-size: 14px;
}

.submission-heading span {
  color: #A0AAA3;
  font-size: 10px;
}

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

.submission-images > div {
  min-width: 0;
  text-align: center;
}

.submission-images img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.15;
  border-radius: 8px;
  object-fit: cover;
}

.submission-images span {
  display: block;
  margin-top: 7px;
  color: #8B9C91;
  font-size: 10px;
}

.submission-images p {
  overflow: hidden;
  margin: 5px 0 0;
  color: #5F7669;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submission-request {
  margin-top: 15px;
  padding: 12px;
  border-radius: 9px;
  background: #F0F7F2;
}

.submission-request strong {
  color: #64816F;
  font-size: 11px;
}

.submission-request p {
  margin: 7px 0 0;
  color: #7D8E83;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}


/* 추천 코디 관리자 */
.recommendation-admin-list {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.recommendation-admin-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 15px;
  border: 1px solid #E1ECE5;
  border-radius: 14px;
  background: #FAFCFA;
}

.recommendation-admin-card > img {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 10px;
  object-fit: cover;
  background: #EAF2ED;
}

.recommendation-admin-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.recommendation-admin-info h4 {
  margin: 0;
  color: #526E5F;
  font-size: 15px;
  font-weight: bold;
  word-break: keep-all;
}

.recommendation-admin-description {
  margin: 8px 0 13px;
  color: #89968E;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.recommendation-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 75px;
  padding: 8px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  justify-self: end;
}

.recommendation-status.active-status {
  background: #E5F4EB;
  color: #56866A;
}

.recommendation-status.inactive-status {
  background: #F1F1EF;
  color: #92968F;
}

/* 추천 코디 버튼 가로 배치 */
.recommendation-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
}

.recommendation-actions button {
  display: inline-flex;
  flex: 0 0 120px;
  width: 120px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
}

.recommendation-actions .small-button {
  border: 1px solid #CDE1D5;
  background: #F5FAF7;
  color: #5F806E;
}

.recommendation-actions .small-button:hover {
  background: #E8F5ED;
}

.recommendation-actions .delete-button {
  border: 1px solid #E8CACA;
  background: #FFF7F6;
  color: #B66C68;
}

.recommendation-actions .delete-button:hover {
  background: #FCEBE9;
}

/* 추천 코디 등록 영역 버튼 */
.recommendation-admin-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recommendation-admin-actions .submit-button {
  flex: 1;
}

/* 모바일 */
@media (max-width: 700px) {

  .recommendation-admin-card {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .recommendation-admin-card > img {
    width: 90px;
    height: 110px;
    grid-row: 1 / 3;
  }

  .recommendation-admin-info {
    min-width: 0;
  }

  .recommendation-admin-info h4 {
    font-size: 13px;
  }

  .recommendation-admin-description {
    margin: 6px 0 10px;
    font-size: 11px;
  }

  .recommendation-status {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    min-width: 65px;
    padding: 6px 9px;
    font-size: 10px;
  }

  .recommendation-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: 100%;
  }

  .recommendation-actions button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 36px;
    padding: 0 5px;
    font-size: 10px;
  }

  .recommendation-admin-actions {
    flex-direction: column;
    align-items: stretch;
  }
}


/* 알림 */
.toast {
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 25px;
  max-width: calc(100% - 35px);
  padding: 13px 20px;
  border-radius: 30px;
  background: rgba(54, 79, 65, 0.94);
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 15px);
  transition: opacity 0.25s, transform 0.25s;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 모바일 */
@media (max-width: 700px) {

  .header-inner {
    padding: 15px 17px;
  }

  .logo h1 {
    font-size: 19px;
  }

  .container {
    padding: 15px 14px 50px;
  }

  .hero {
    padding: 40px 10px 30px;
  }

  .hero h2 {
    font-size: 24px;
  }

  .form-section {
    padding: 18px;
  }

  .recommendation-section {
    padding: 25px 15px;
  }

  .polaroid-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }

  .random-section {
    padding: 25px 15px;
  }

  .random-result {
    padding: 15px 10px;
  }

  .random-preview-grid {
    gap: 9px;
  }

  .random-item > p {
    min-height: 32px;
    font-size: 11px;
  }

  .random-part-button {
    padding: 9px 2px;
    font-size: 10px;
  }

  .random-main-actions {
    grid-template-columns: 1fr;
  }

  .random-button,
  .random-apply-button {
    padding: 14px;
  }

  .selection-section {
    padding: 18px 13px;
  }

  .selection-layout {
    grid-template-columns: 1fr;
  }

  .image-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .preview-box {
    position: static;
    max-width: 220px;
    margin: 5px auto 0;
  }

  .request-section {
    padding: 20px 15px;
  }

  .admin-container {
    padding: 15px 0;
  }

  .admin-card {
    padding: 18px 14px;
  }

  .admin-image-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .admin-toolbar {
    align-items: flex-start;
  }

  .submission-card {
    padding: 12px;
  }

  .recommendation-admin-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .recommendation-admin-card > img {
    width: 72px;
    height: 90px;
  }

  .recommendation-actions {
    grid-column: 1 / -1;
  }

  .recommendation-admin-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 브라우저 이미지 보호 스타일 */
#userPage img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

#userPage .image-card,
#userPage .preview-box,
#userPage .polaroid-card,
#userPage .random-item-image {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#userPage img {
  pointer-events: auto;
}

@media (hover: none) and (pointer: coarse) {
  #userPage img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* 선택권 및 히든 이미지 표시 */
.entitlement-box {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid #CFE5DC;
  border-radius: 16px;
  background: #F5FBF8;
}

.entitlement-box h3 {
  margin: 0 0 8px;
  color: #426B5C;
}

.entitlement-box > p {
  margin: 0 0 16px;
  color: #68766F;
}

.entitlement-box label {
  display: block;
  margin: 12px 0 7px;
  font-weight: 600;
}

.entitlement-box select {
  width: 100%;
}

.entitlement-option {
  margin-top: 12px;
}

.entitlement-help {
  margin-top: 10px !important;
  color: #6C8277;
  font-size: 13px;
}

.hidden-image-option {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}

.hidden-image-option input {
  width: auto;
}

.submission-entitlement {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: #EEF7F2;
  color: #426B5C;
  font-weight: 600;
}


/* 공통 페이지네이션 */
.gallery-pagination {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
  margin: 12px 0 4px;
  padding: 8px 0;
}

.page-button {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #D4E7DC;
  border-radius: 9px;
  background: #F7FBF8;
  color: #668574;
  font-size: 12px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.page-button:hover:not(:disabled) {
  border-color: #9BCDB3;
  background: #E8F5ED;
}

.page-button.active {
  border-color: #69B99C;
  background: #69B99C;
  color: #FFFFFF;
  font-weight: bold;
}

.page-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}



/* 이용자 페이지 신규/기존 구분 탭 */
.image-grade-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0 16px;
}

.grade-tab-button {
  min-width: 92px;
  padding: 10px 22px;
  border: 1px solid #D5E7DD;
  border-radius: 12px;
  background: #F8FBF9;
  color: #6E8979;
  font-size: 13px;
  transition: all .2s ease;
}

.grade-tab-button:hover {
  background: #EAF6EF;
}

.grade-tab-button.active {
  border-color: #69B99D;
  background: #69B99D;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(105,185,157,.18);
}

.grade-filter-tabs {
  margin-top: -5px;
}

.admin-image-actions {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.edit-button {
  padding: 8px 12px;
  border: 1px solid #8BCBB2;
  border-radius: 8px;
  background: #F2FBF6;
  color: #4C9C7E;
  font-size: 11px;
}

.edit-button:hover {
  background: #E4F5EC;
}

.image-edit-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(34, 54, 45, .42);
}

.image-edit-modal.hidden {
  display: none !important;
}

.image-edit-panel {
  width: min(100%, 430px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  border: 1px solid #DCEBE3;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 14px 40px rgba(39, 73, 57, .2);
}

.image-edit-panel .admin-toolbar {
  margin-bottom: 14px;
}

.image-edit-panel .admin-toolbar h3 {
  margin: 0;
}

.edit-image-preview {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto 18px;
  border-radius: 12px;
  object-fit: cover;
  background: #F2F8F4;
}

.image-edit-panel label {
  display: block;
  margin: 13px 0 7px;
  color: #668171;
  font-size: 12px;
}

.image-edit-panel input,
.image-edit-panel select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #DCE9E1;
  border-radius: 9px;
  background: #FBFDFC;
  color: #536D5F;
}

.edit-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.edit-modal-actions button {
  flex: 1;
}

@media (max-width: 600px) {
  .image-grade-tabs {
    margin-top: 14px;
  }

  .grade-tab-button {
    flex: 1;
  }

  .image-edit-panel {
    padding: 18px;
  }
}

.image-load-error {
  object-fit: contain !important;
  background: #F2F8F4;
  min-height: 100px;
}


/* 상세 이미지 관리 */
.detail-image-manager {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #DCEBE3;
  border-radius: 12px;
  background: #F7FBF8;
}
.detail-image-manager h4 { margin: 0 0 7px; color: #527A66; font-size: 14px; }
.detail-image-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 12px 0; }
.detail-image-admin-card { min-width: 0; padding: 7px; border: 1px solid #E0ECE5; border-radius: 10px; background: #FFFFFF; text-align: center; }
.detail-image-admin-card img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 7px; background: #F2F8F4; }
.detail-image-admin-card span { display: block; margin: 5px 0; color: #668171; font-size: 10px; }
.detail-image-admin-card button { padding: 5px 9px; font-size: 10px; }
.detail-image-manager input[type="file"] { margin-bottom: 10px; }

/* 대표 이미지 상세 보기 */
.image-viewer-modal { position: fixed; z-index: 2000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(25, 43, 35, .72); }
.image-viewer-modal.hidden { display: none !important; }
.image-viewer-panel { width: min(100%, 760px); max-height: 94vh; overflow: auto; padding: 18px; border: 1px solid #D7EAE0; border-radius: 20px; background: #FFFFFF; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.image-viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: #527A66; }
.image-viewer-heading strong { display: block; font-size: 17px; }
.image-viewer-heading span { display: block; margin-top: 4px; color: #91A59A; font-size: 11px; }
.image-viewer-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #EAF8F1; color: #548C73; font-size: 25px; cursor: pointer; }
.image-viewer-stage { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; align-items: center; gap: 10px; min-height: 260px; padding: 10px; border-radius: 14px; background: #F5FAF7; }
.image-viewer-stage > img { display: block; width: 100%; height: min(62vh, 560px); object-fit: contain; }
.image-viewer-nav { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #DCEFE5; color: #477D63; font-size: 28px; cursor: pointer; }
.image-viewer-thumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.image-viewer-thumb { width: 68px; height: 68px; padding: 3px; border: 2px solid transparent; border-radius: 10px; background: #F1F7F3; cursor: pointer; }
.image-viewer-thumb.active { border-color: #65B291; }
.image-viewer-thumb img { width: 100%; height: 100%; object-fit: contain; }
.image-viewer-help { margin: 10px 0 0; color: #91A59A; font-size: 11px; text-align: center; }
.image-card { position: relative; }
.image-card img { transition: transform .18s ease; }
@media (hover: hover) and (pointer: fine) {
  .image-card:hover { z-index: 4; }
  .image-card:hover img { transform: scale(1.045); }
}
@media (max-width: 600px) {
  .image-viewer-modal { padding: 8px; }
  .image-viewer-panel { padding: 12px; }
  .image-viewer-stage { grid-template-columns: 32px minmax(0,1fr) 32px; gap: 5px; min-height: 200px; padding: 5px; }
  .image-viewer-stage > img { height: 55vh; }
  .image-viewer-nav { width: 30px; height: 30px; font-size: 22px; }
  .image-viewer-thumb { width: 55px; height: 55px; }
  .detail-image-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}




/* 상세 이미지 유형 및 설명 */
.detail-description-wrap { margin: 10px 0 12px; }
.detail-description-wrap textarea { width: 100%; min-height: 76px; padding: 10px; border: 1px solid #D5E6DC; border-radius: 9px; resize: vertical; font: inherit; }
.detail-image-admin-type { display: block; margin: 7px 0 4px; color: #4F8A6D; font-size: 11px; font-weight: bold; }
.detail-image-admin-description { margin: 4px 2px 8px; color: #7D8E83; font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.image-viewer-description { max-width: 760px; margin: 10px auto; padding: 10px 14px; border-radius: 10px; background: #EAF8F4; color: #456B59; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }