@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'GangwonEducationModuche';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFLightA.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GangwonEducationModuche';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

:root{
  /* Light blue “gallery wall” */
  --bg1: #f6fbff;
  --bg2: #eaf3ff;
  --bg3: #f2f7ff;

  --text: rgb(33, 48, 75);
  --muted: rgba(28,35,48,0.8);

  --border: rgba(28,35,48,0.14);
  --glass: rgba(255,255,255,0.80);

  --radius: 16px;

  /* Shadows tuned for “hanging prints” */
  --shadow-soft: 0 10px 24px rgba(28,35,48,0.10);
  --shadow: 0 26px 60px rgba(28,35,48,0.16);

  --maxw: 1100px;

  --title-font: "Isamanru", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --body-font: "GangwonEducationModuche", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color: var(--text);
  font-family: var(--body-font);
  overflow-x:hidden;

  /* Moving wall gradient */
  background: linear-gradient(120deg, var(--bg1), var(--bg2), var(--bg3));
  background-size: 220% 220%;
  animation: wallDrift 70s ease-in-out infinite;
}

/* Slow drifting wall light */
@keyframes wallDrift{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------------- Cinematic dust + grain (CSS only) ---------------- */
/* Two layers: one soft “dust motes”, one fine grain. Subtle by design. */

body::before,
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
}

/* Dust motes: sparse specks + faint streaks, drifting */
body::before{
  opacity: 0.22;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 28%, rgba(255,255,255,0.40) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 62%, rgba(255,255,255,0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 72%, rgba(255,255,255,0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 78%, rgba(255,255,255,0.30) 0 1px, transparent 2px),
    linear-gradient(110deg, transparent 0 48%, rgba(255,255,255,0.06) 49% 51%, transparent 52% 100%),
    linear-gradient(20deg, transparent 0 56%, rgba(28,35,48,0.03) 57% 58%, transparent 59% 100%);
  animation: dustDrift 22s ease-in-out infinite alternate;
}

/* Fine grain: repeated micro-contrast */
body::after{
  opacity: 0.10;
  background:
    repeating-radial-gradient(circle at 20% 30%,
      rgba(28,35,48,0.05) 0 0.5px,
      transparent 0.6px 2.2px
    ),
    repeating-radial-gradient(circle at 70% 60%,
      rgba(255,255,255,0.06) 0 0.6px,
      transparent 0.7px 2.6px
    );
  mix-blend-mode: multiply;
  animation: grainWander 16s linear infinite;
}

@keyframes dustDrift{
  from{ transform: translate3d(-10px, -6px, 0); }
  to  { transform: translate3d(14px, 10px, 0); }
}

@keyframes grainWander{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(18px, -12px, 0); }
}

/* Keep content above dust/grain */
.top, .wrap, .foot{
  position:relative;
  z-index: 1;
}

/* ---------------- Header ---------------- */

.top{
  padding: 38px 18px 10px;
  text-align: center;
}

.brand{
  max-width: var(--maxw);
  margin: 0 auto;
}

.kicker{
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .62;
}

h1{
  margin: 12px 0 8px;
  font-weight: 850;
  letter-spacing: .01em;
  font-size: clamp(28px, 4vw, 44px);
  font-family: var(--title-font);
}

.sub{
  margin:0;
  font-size:14px;
  color: var(--muted);
}

/* ---------------- Grid ---------------- */

.wrap{
  padding: 22px 18px 44px;
}

/* Add a little perspective to the whole wall */
.grid{
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(1, minmax(0, 1fr));

  perspective: 1000px;
  transform-style: preserve-3d;
}

@media (min-width: 560px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 920px){
  .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------- Tile: “Hanging print” ---------------- */

.tile{
  display:block;
  text-decoration:none;
  color:inherit;

  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;

  box-shadow: var(--shadow-soft);

  /* Physical presence */
  transform-style: preserve-3d;
  transform-origin: 50% 30%;
  transition:
    transform 320ms cubic-bezier(.2,.7,.2,1),
    box-shadow 320ms ease,
    border-color 320ms ease,
    filter 320ms ease;
}

/* Subtle “not perfectly aligned” feel (pattern-based) */
.tile:nth-child(3n+1){ transform: rotateZ(-0.35deg) translateZ(0); }
.tile:nth-child(3n+2){ transform: rotateZ(0.25deg) translateZ(0); }
.tile:nth-child(3n){   transform: rotateZ(-0.10deg) translateZ(0); }

/* Dramatic hover: steps forward + slight tilt + spotlight ring */
.tile:hover{
  transform: translateY(-8px) rotateX(2.5deg) rotateY(-2deg) rotateZ(0deg) translateZ(12px);
  box-shadow: var(--shadow);
  border-color: rgba(28,35,48,0.22);
  filter: saturate(1.02) contrast(1.01);
}

/* “Mat” / frame highlight (subtle, not UI-y) */
.tile::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.55),
    inset 0 -18px 30px rgba(28,35,48,0.04);
  opacity: 0.65;
  transition: opacity 320ms ease;
}

.tile:hover::before{
  opacity: 0.90;
}

/* Soft spotlight ring on hover */
.tile::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: calc(var(--radius) + 1px);
  pointer-events:none;
  opacity: 0;
  box-shadow:
    0 0 0 8px rgba(255,255,255,0.70),
    0 0 0 1px rgba(28,35,48,0.05);
  transition: opacity 320ms ease;
}

.tile:hover::after{ opacity: 1; }

.tile:focus-visible{
  outline: 3px solid rgba(35,110,200,0.25);
  outline-offset: 3px;
}

/* ---------------- Thumbnail ---------------- */

.thumb{
  margin:0;
  aspect-ratio: 16 / 9;
  position:relative;
  background: rgba(255,255,255,0.55);
}

/* Make mixed cover colors feel curated */
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform 420ms ease, filter 420ms ease;
}

/* Very light film/unifier, fades on hover */
.thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10),
    rgba(28,35,48,0.10)
  );
  pointer-events:none;
  opacity: 0.70;
  transition: opacity 320ms ease;
}

.tile:hover .thumb img{
  transform: scale(1.03);
  filter: saturate(1.04) contrast(1.04);
}

.tile:hover .thumb::after{
  opacity: 0.25;
}

/* ---------------- Metadata ---------------- */

.meta{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.title{
  font-weight: 800;
  letter-spacing: .03em;
  font-size: 14px;
  font-family: var(--title-font);
}

.desc{
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
}

/* ---------------- Footer ---------------- */

.foot{
  font-weight: 700;
  text-align: center;
  padding: 12px 18px 28px;
}

.fine{
  max-width: var(--maxw);
  margin:0 auto;
  font-size:12px;
  opacity:.55;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body{ animation: none; }
  body::before, body::after{ animation: none; }
  .tile, .thumb img, .thumb::after{ transition: none; }
}