:root {
  --bg: #ebe9e3;
  --paper: #f7f5ef;
  --ink: #111;
  --muted: #7a766e;
  --line: rgba(17, 17, 17, 0.16);
  --accent: #ff5a36;
  --sidebar: 230px;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;

  min-height: 100vh;

  background: var(--bg);
  color: var(--ink);

  font-family:
    Arial,
    "Noto Sans KR",
    sans-serif;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

img {
  display: block;
  max-width: 100%;
}

code {
  padding:
    2px
    5px;

  background:
    rgba(17, 17, 17, 0.06);

  font-family:
    Consolas,
    monospace;

  font-size: 0.95em;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
  position: fixed;

  inset:
    0
    auto
    0
    0;

  z-index: 20;

  width: var(--sidebar);

  padding:
    23px
    16px;

  display: flex;
  flex-direction: column;

  background: #101010;
  color: #eee;
}


/* =========================================================
   ADMIN BRAND
========================================================= */

.admin-brand {
  padding:
    0
    8px
    22px;

  border-bottom:
    1px solid #333;

  color: #fff;

  text-decoration: none;

  font-size: 20px;
  font-weight: 950;

  letter-spacing: -0.06em;
}

.admin-brand span {
  margin-left: 5px;

  color: #888;

  font-size: 7px;

  letter-spacing: 0.14em;
}


/* =========================================================
   SIDEBAR NAV
========================================================= */

.sidebar nav {
  display: flex;
  flex-direction: column;

  gap: 5px;

  margin-top: 18px;
}

.sidebar .program-admin-entry {
  display: block;
  padding: 14px 12px;
  color: #ddd;
  font-size: 12px;
  text-decoration: none;
  border-top: 1px solid #333;
  margin-top: 12px;
}
.sidebar .program-admin-entry:hover { background: #262626; color: #fff; }

.sidebar nav button,
.logout {
  border: 0;

  background: transparent;

  color: #9b9b9b;

  text-align: left;

  padding: 12px;

  font-size: 10px;
  font-weight: 800;
}

.sidebar nav button {
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

.sidebar nav button:hover,
.sidebar nav button.active {
  background: #292929;

  color: #fff;
}

.sidebar-bottom {
  margin-top: auto;

  display: grid;

  gap: 8px;

  padding: 8px;
}

.sidebar-bottom a {
  color: #ddd;

  text-decoration: none;

  font-size: 9px;
}

.sidebar-bottom .logout {
  padding:
    4px
    0;
}


/* =========================================================
   MAIN
========================================================= */

.admin-main {
  margin-left: var(--sidebar);

  min-height: 100vh;
}


/* =========================================================
   MAIN HEADER
========================================================= */

.admin-main > header {
  position: sticky;

  top: 0;

  z-index: 10;

  height: 82px;

  padding:
    0
    28px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(235, 233, 227, 0.94);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}

header small,
.panel-head small {
  color: var(--muted);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: 0.15em;
}

header h1 {
  margin:
    4px
    0
    0;

  font-size: 22px;

  letter-spacing: -0.04em;
}

.admin-main > header > span {
  color: var(--muted);

  font-size: 8px;
}


/* =========================================================
   VIEWS
========================================================= */

.view {
  display: none;

  padding: 24px;
}

.view.active {
  display: block;
}


/* =========================================================
   PANEL
========================================================= */

.panel {
  min-width: 0;

  padding: 20px;

  border:
    1px solid var(--line);

  background:
    var(--paper);
}

.panel-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding-bottom: 15px;

  border-bottom:
    1px solid var(--line);
}

.panel-head h2 {
  margin:
    3px
    0
    0;

  font-size: 17px;
}

.panel-head > button {
  padding:
    7px
    9px;

  border:
    1px solid #bbb5aa;

  background:
    transparent;

  font-size: 8px;
  font-weight: 800;
}

.panel-head > button:hover {
  background: #111;

  border-color: #111;

  color: #fff;
}


/* =========================================================
   HELPER
========================================================= */

.helper {
  margin:
    14px
    0;

  color: var(--muted);

  font-size: 8px;

  line-height: 1.65;
}


/* =========================================================
   HERO PARTICLE
========================================================= */

.hero-particle-admin-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    370px;

  gap: 15px;

  align-items: start;
}


/* =========================================================
   HERO PARTICLE CURRENT PREVIEW PANEL
========================================================= */

.hero-particle-preview-panel {
  min-width: 0;
}


/* =========================================================
   HERO PARTICLE PREVIEW

   checkerboard:
   투명 PNG인지 쉽게 확인하기 위한 배경
========================================================= */

.hero-particle-preview {
  position: relative;

  width: 100%;

  min-height: 420px;

  margin-top: 16px;

  display: grid;

  place-items: center;

  overflow: hidden;

  border:
    1px solid rgba(17, 17, 17, 0.16);

  background-color: #191919;

  background-image:
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.045) 25%,
      transparent 25%
    ),
    linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.045) 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      transparent 75%,
      rgba(255, 255, 255, 0.045) 75%
    ),
    linear-gradient(
      -45deg,
      transparent 75%,
      rgba(255, 255, 255, 0.045) 75%
    );

  background-size:
    24px
    24px;

  background-position:
    0 0,
    0 12px,
    12px -12px,
    -12px 0;
}


/* =========================================================
   CURRENT PARTICLE IMAGE
========================================================= */

.hero-particle-preview img {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 100%;

  max-height: 520px;

  padding:
    clamp(24px, 5vw, 80px);

  object-fit: contain;

  filter:
    drop-shadow(
      0
      16px
      40px
      rgba(0, 0, 0, 0.35)
    );
}

.hero-particle-preview img[hidden] {
  display: none;
}


/* =========================================================
   EMPTY PREVIEW
========================================================= */

.hero-particle-preview-empty {
  position: absolute;

  inset: 0;

  z-index: 1;

  display: grid;

  align-content: center;
  justify-items: center;

  gap: 7px;

  padding: 30px;

  text-align: center;

  pointer-events: none;
}

.hero-particle-preview-empty[hidden] {
  display: none;
}

.hero-particle-preview-empty strong {
  color:
    rgba(255, 255, 255, 0.7);

  font-size: 10px;

  letter-spacing: 0.14em;
}

.hero-particle-preview-empty span {
  color:
    rgba(255, 255, 255, 0.35);

  font-size: 8px;
}


/* =========================================================
   HERO PARTICLE META
========================================================= */

.hero-particle-meta {
  margin-top: 10px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(0, 1fr)
    minmax(90px, 0.5fr);

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);
}

.hero-particle-meta > div {
  min-width: 0;

  min-height: 76px;

  padding:
    13px
    12px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 12px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.hero-particle-meta span {
  color: var(--muted);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: 0.13em;
}

.hero-particle-meta strong {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 9px;

  line-height: 1.4;
}


/* =========================================================
   HERO RESET BUTTON
========================================================= */

.secondary-action {
  width: 100%;

  margin-top: 12px;

  padding: 12px;

  border:
    1px solid #c8c1b6;

  background:
    transparent;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 0.08em;

  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}

.secondary-action:hover:not(:disabled) {
  border-color: #a43022;

  background: #a43022;

  color: #fff;
}

.secondary-action:disabled {
  opacity: 0.35;
}


/* =========================================================
   HERO PARTICLE UPLOAD
========================================================= */

.hero-particle-upload-panel {
  min-width: 0;
}

.hero-particle-drop {
  height: 280px;
}


/* =========================================================
   UPLOAD LOCAL PREVIEW
========================================================= */

.hero-particle-local-preview {
  margin:
    12px
    0;

  padding:
    12px;

  border:
    1px solid var(--line);

  background:
    #ebe8e1;
}

.hero-particle-local-preview[hidden] {
  display: none;
}

.hero-particle-local-preview > small {
  display: block;

  margin-bottom: 9px;

  color: var(--muted);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: 0.13em;
}

.hero-particle-local-preview-frame {
  position: relative;

  width: 100%;

  aspect-ratio:
    16 / 9;

  display: grid;

  place-items: center;

  overflow: hidden;

  background-color: #151515;

  background-image:
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05) 25%,
      transparent 25%
    ),
    linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.05) 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      transparent 75%,
      rgba(255, 255, 255, 0.05) 75%
    ),
    linear-gradient(
      -45deg,
      transparent 75%,
      rgba(255, 255, 255, 0.05) 75%
    );

  background-size:
    20px
    20px;

  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
}

.hero-particle-local-preview-frame img {
  width: 100%;
  height: 100%;

  padding: 18px;

  object-fit: contain;
}


/* =========================================================
   HERO PARTICLE UPLOAD STATUS
========================================================= */

#heroParticleUploadStatus {
  min-height: 18px;

  margin:
    10px
    0
    0;

  color: var(--muted);

  font-size: 8px;

  line-height: 1.6;
}


/* =========================================================
   HERO PARTICLE GUIDE
========================================================= */

.hero-particle-guide {
  margin-top: 15px;
}

.hero-particle-guide-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin-top: 16px;

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);
}

.hero-particle-guide-grid > div {
  min-height: 165px;

  padding: 16px;

  display: flex;

  flex-direction: column;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.hero-particle-guide-grid span {
  color: var(--muted);

  font-size: 7px;

  letter-spacing: 0.13em;
}

.hero-particle-guide-grid strong {
  margin-top: auto;

  font-size: 13px;

  letter-spacing: -0.02em;
}

.hero-particle-guide-grid p {
  margin:
    8px
    0
    0;

  color: var(--muted);

  font-size: 8px;

  line-height: 1.65;
}


/* =========================================================
   GALLERY ADMIN GRID
========================================================= */

.gallery-admin-grid {
  display: grid;

  grid-template-columns:
    340px
    minmax(0, 1fr);

  gap: 15px;

  align-items: start;
}


/* =========================================================
   UPLOAD PANEL
========================================================= */

.upload-panel {
  position: sticky;

  top: 106px;
}


/* =========================================================
   FILE DROP
========================================================= */

.file-drop {
  position: relative;

  height: 240px;

  overflow: hidden;

  display: grid;

  place-items: center;
  align-content: center;

  gap: 8px;

  border:
    1px dashed #9d978c;

  background: #eeece6;

  text-align: center;

  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}

.file-drop:hover {
  border-color: var(--accent);

  background: #e9e5dd;
}

.file-drop input {
  position: absolute;

  inset: 0;

  opacity: 0;

  cursor: pointer;
}

.file-drop strong {
  font-size: 11px;
}

.file-drop span {
  color: var(--muted);

  font-size: 7px;
}


/* =========================================================
   SELECTED FILES
========================================================= */

.selected-files {
  min-height: 45px;

  margin:
    10px
    0;

  padding: 10px;

  background: #e8e5de;

  font-size: 8px;

  line-height: 1.6;

  word-break: break-all;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.primary {
  width: 100%;

  padding: 13px;

  border: 0;

  background: var(--accent);
  color: #fff;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 0.08em;

  transition:
    opacity 0.16s ease,
    filter 0.16s ease;
}

.primary:hover:not(:disabled) {
  filter:
    brightness(0.92);
}

.primary:disabled {
  opacity: 0.45;
}


/* =========================================================
   UPLOAD STATUS
========================================================= */

.upload-panel > p:last-child {
  color: #aa3020;

  font-size: 8px;
}


/* HERO status는 성공 메시지도 사용하므로 중립색 */

.hero-particle-upload-panel > p:last-child {
  color: var(--muted);
}


/* =========================================================
   GALLERY LIST
========================================================= */

.gallery-list {
  display: grid;

  gap: 8px;

  margin-top: 15px;
}


/* =========================================================
   GALLERY ROW
========================================================= */

.gallery-row {
  display: grid;

  grid-template-columns:
    150px
    minmax(0, 1fr)
    84px;

  gap: 12px;

  padding: 9px;

  align-items: start;

  border:
    1px solid var(--line);

  background: #fff;
}


/* =========================================================
   GALLERY THUMB
========================================================= */

.gallery-thumb {
  aspect-ratio:
    16 / 9;

  overflow: hidden;

  background:
    #d5d1c8
    center /
    cover
    no-repeat;
}


/* =========================================================
   GALLERY FIELDS
========================================================= */

.gallery-fields {
  display: grid;

  grid-template-columns:
    1fr
    1fr
    90px;

  gap: 8px;
}

.gallery-fields label {
  color: var(--muted);

  font-size: 7px;
  font-weight: 900;
}

.gallery-fields input {
  display: block;

  width: 100%;

  margin-top: 5px;

  padding: 8px;

  border:
    1px solid #c3bdb2;

  background: #fff;

  font-size: 8px;
}

.gallery-fields .alt {
  grid-column:
    1 / 3;
}

.gallery-fields .publish {
  display: flex;

  align-items: center;

  gap: 6px;

  padding-top: 18px;

  color: #111;
}

.gallery-fields .publish input {
  width: auto;

  margin: 0;
}


/* =========================================================
   GALLERY ACTIONS
========================================================= */

.gallery-actions {
  display: grid;

  gap: 5px;
}

.gallery-actions button {
  padding:
    8px
    4px;

  border:
    1px solid #c8c1b6;

  background: #f3f1eb;

  font-size: 7px;
}

.gallery-actions button:hover {
  background: #111;

  border-color: #111;

  color: #fff;
}

.gallery-actions .danger {
  color: #a43022;
}

.gallery-actions .danger:hover {
  background: #a43022;

  border-color: #a43022;

  color: #fff;
}


/* =========================================================
   CONTACT LIST
========================================================= */

.contact-list {
  display: grid;

  margin-top: 12px;
}


/* =========================================================
   CONTACT ROW
========================================================= */

.contact-row {
  display: grid;

  grid-template-columns:
    180px
    220px
    1fr
    150px;

  gap: 14px;

  padding:
    15px
    4px;

  align-items: start;

  border-bottom:
    1px solid var(--line);
}

.contact-row b {
  font-size: 10px;
}

.contact-row small {
  color: var(--muted);

  font-size: 7px;

  line-height: 1.6;
}

.contact-row p {
  margin: 0;

  font-size: 9px;

  line-height: 1.6;

  white-space: pre-wrap;
}


/* =========================================================
   AUTH
========================================================= */

.auth {
  position: fixed;

  z-index: 100;

  inset: 0;

  display: grid;

  place-items: center;

  padding: 20px;

  background: #0d0d0d;
}

.auth.hidden {
  display: none;
}

.auth form {
  width:
    min(
      390px,
      100%
    );

  padding: 30px;

  display: grid;

  gap: 13px;

  background: #f7f5ef;
}

.auth form > a {
  color: #111;

  text-decoration: none;

  font-size: 24px;
  font-weight: 950;

  letter-spacing: -0.07em;
}

.auth form > small {
  color: #777;

  font-size: 7px;

  letter-spacing: 0.15em;
}

.auth h1 {
  margin:
    4px
    0
    10px;

  font-size: 25px;
}

.auth label {
  font-size: 8px;
  font-weight: 900;
}

.auth input {
  width: 100%;

  margin-top: 6px;

  padding: 12px;

  border:
    1px solid #aaa;

  background: #fff;
}

.auth button {
  padding: 13px;

  border: 0;

  background: #111;
  color: #fff;

  font-size: 9px;
  font-weight: 900;
}

.auth p {
  min-height: 15px;

  margin: 0;

  color: #b53023;

  font-size: 8px;
}


/* =========================================================
   TOAST
========================================================= */

.toast {
  position: fixed;

  right: 20px;
  bottom: 20px;

  z-index: 150;

  padding:
    13px
    16px;

  background: #111;
  color: #fff;

  font-size: 8px;

  box-shadow:
    0
    18px
    60px
    rgba(0, 0, 0, 0.25);
}

.toast[hidden] {
  display: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .gallery-admin-grid,
  .hero-particle-admin-grid {
    grid-template-columns:
      1fr;
  }


  .upload-panel {
    position: static;
  }


  .hero-particle-preview {
    min-height: 360px;
  }


  .hero-particle-guide-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .contact-row {
    grid-template-columns:
      150px
      180px
      1fr;
  }


  .contact-row > small:last-child {
    grid-column:
      1 / -1;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  :root {
    --sidebar: 0px;
  }


  /* -------------------------------------------------------
     SIDEBAR
  ------------------------------------------------------- */

  .sidebar {
    position: static;

    width: auto;
    height: auto;

    padding: 13px;
  }


  .admin-brand {
    display: block;

    padding-bottom: 12px;
  }


  .sidebar nav {
    flex-direction: row;

    overflow-x: auto;

    margin-top: 10px;

    padding-bottom: 2px;
  }


  .sidebar nav button {
    flex:
      0
      0
      auto;

    white-space: nowrap;
  }


  .sidebar-bottom {
    display: none;
  }


  /* -------------------------------------------------------
     MAIN
  ------------------------------------------------------- */

  .admin-main {
    margin-left: 0;
  }


  .admin-main > header {
    height: 68px;

    padding:
      0
      12px;
  }


  .admin-main > header > span {
    display: none;
  }


  .view {
    padding: 10px;
  }


  /* -------------------------------------------------------
     HERO PARTICLE
  ------------------------------------------------------- */

  .hero-particle-admin-grid {
    gap: 10px;
  }


  .hero-particle-preview {
    min-height: 300px;
  }


  .hero-particle-preview img {
    max-height: 420px;

    padding:
      30px
      20px;
  }


  .hero-particle-meta {
    grid-template-columns:
      1fr;
  }


  .hero-particle-meta > div {
    min-height: 58px;
  }


  .hero-particle-guide {
    margin-top: 10px;
  }


  .hero-particle-guide-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .hero-particle-guide-grid > div {
    min-height: 145px;

    padding: 13px;
  }


  .hero-particle-drop {
    height: 220px;
  }


  /* -------------------------------------------------------
     GALLERY
  ------------------------------------------------------- */

  .gallery-row {
    grid-template-columns:
      100px
      minmax(0, 1fr);
  }


  .gallery-actions {
    grid-column:
      1 / -1;

    grid-template-columns:
      1fr
      1fr;
  }


  .gallery-fields {
    grid-template-columns:
      1fr;
  }


  .gallery-fields .alt {
    grid-column: auto;
  }


  /* -------------------------------------------------------
     CONTACT
  ------------------------------------------------------- */

  .contact-row {
    grid-template-columns:
      1fr;
  }


  .contact-row > small:last-child {
    grid-column: auto;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 470px) {

  .panel {
    padding: 14px;
  }


  .panel-head {
    gap: 10px;
  }


  .panel-head h2 {
    font-size: 15px;
  }


  /* -------------------------------------------------------
     HERO PARTICLE
  ------------------------------------------------------- */

  .hero-particle-preview {
    min-height: 240px;
  }


  .hero-particle-preview img {
    padding:
      24px
      14px;
  }


  .hero-particle-guide-grid {
    grid-template-columns:
      1fr;
  }


  .hero-particle-guide-grid > div {
    min-height: 125px;
  }


  .hero-particle-drop {
    height: 190px;
  }


  /* -------------------------------------------------------
     GALLERY
  ------------------------------------------------------- */

  .gallery-row {
    grid-template-columns:
      1fr;
  }


  .gallery-thumb {
    width: 100%;
  }


  .gallery-actions {
    grid-column: auto;
  }

}

/* =========================================================
   WORK BACKGROUND ADMIN
========================================================= */

.work-background-preview {
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: #111;
}

.work-background-preview img {
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  object-fit: cover;
  filter: none;
}

.work-background-local-preview-frame img {
  padding: 0;
  object-fit: cover;
}

#workBackgroundUploadStatus {
  min-height: 18px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.6;
}