/* ============================================================
   phono·graph — Polaroid Wall
   톤/컬러 변수: 여기만 바꾸면 전체가 바뀝니다.
   ============================================================ */
:root{
  --board:#1c1a16;        /* 보드(배경) — 먹색 */
  --board-deep:#26241d;
  --ink:#1c1a16;          /* 폴라로이드 위 글자 */
  --ink-soft:#55514a;
  --ivory:#efeadd;        /* 보드 위 글자 */
  --ivory-soft:rgba(239,234,221,.62);
  --moss:#9aa284;         /* 이끼 초록 (어두운 배경용 포인트) */
  --paper:#fdfcf8;        /* 폴라로이드 종이 */
  --serif:'Gowun Batang',serif;
  --sans:'Noto Sans KR',sans-serif;
  --pen:'Nanum Pen Script',cursive;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--board);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  color:var(--ivory);
  font-family:var(--serif);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 40px;
  background:linear-gradient(to bottom, rgba(28,26,22,.96) 55%, rgba(28,26,22,0));
}
.logo{
  font-family:var(--sans);font-size:15px;font-weight:300;
  letter-spacing:.28em;color:var(--ivory);text-transform:lowercase;
}
.logo .dot{color:var(--moss);font-weight:700;margin:0 .12em;}
nav{display:flex;gap:30px;font-family:var(--sans);font-size:12px;letter-spacing:.18em;color:var(--ivory-soft);}
nav a{padding:4px 0;position:relative;transition:color .3s;}
nav a:hover{color:var(--ivory);}
nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ivory);transition:width .35s;}
nav a:hover::after{width:100%;}

/* ---------- intro ---------- */
.intro{padding:170px 40px 70px;text-align:center;position:relative;}
.intro .kicker{
  font-family:var(--sans);font-weight:300;font-size:10.5px;
  letter-spacing:.55em;color:var(--moss);margin-bottom:24px;
}
.intro h1{font-size:clamp(26px,3.6vw,44px);font-weight:400;line-height:1.7;letter-spacing:.02em;color:var(--ivory);}
.intro .sub{
  margin-top:22px;font-family:var(--sans);font-weight:300;
  font-size:13px;color:var(--ivory-soft);letter-spacing:.08em;
}
.intro .pen{
  font-family:var(--pen);font-size:24px;color:var(--moss);
  margin-top:26px;transform:rotate(-1.5deg);display:inline-block;
}

/* ---------- wall (최신 한 장 크게, 지난 사진은 아래 작게) ---------- */
.wall{
  max-width:960px;margin:0 auto;
  padding:40px 28px 80px;
}

.pol{
  display:inline-block;width:100%;
  margin:0 0 64px;
  background:var(--paper);
  padding:10px 10px 40px;   /* 폴라로이드 프레임 — 아래가 두꺼움 */
  box-shadow:0 3px 8px rgba(0,0,0,.5), 0 18px 34px -14px rgba(0,0,0,.65);
  position:relative;
  break-inside:avoid;
  cursor:pointer;
  transition:transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s;
}
.pol:nth-child(6n+1){transform:rotate(-1.4deg);}
.pol:nth-child(6n+2){transform:rotate(1.1deg);}
.pol:nth-child(6n+3){transform:rotate(-.6deg);}
.pol:nth-child(6n+4){transform:rotate(1.8deg);}
.pol:nth-child(6n+5){transform:rotate(-2deg);}
.pol:nth-child(6n+6){transform:rotate(.7deg);}
.pol:hover{
  transform:rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow:0 8px 18px rgba(0,0,0,.55), 0 36px 56px -18px rgba(0,0,0,.75);
  z-index:5;
}
.pol img{width:100%;height:auto;background:#ddd;}

/* 마스킹 테이프 */
.pol.tape::before{
  content:'';position:absolute;top:-9px;left:50%;
  width:74px;height:22px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(233,224,196,.85);
  box-shadow:0 1px 2px rgba(28,26,22,.12);
  z-index:3;
}
.pol.tape-corner::before{
  content:'';position:absolute;top:-8px;left:-16px;
  width:68px;height:20px;
  transform:rotate(-42deg);
  background:rgba(233,224,196,.85);
  box-shadow:0 1px 2px rgba(28,26,22,.12);
  z-index:3;
}

/* 프레임 하단 손글씨 캡션 */
.pol .cap{
  position:absolute;left:0;right:0;bottom:8px;
  text-align:center;
  font-family:var(--pen);font-size:19px;color:var(--ink-soft);
  letter-spacing:.02em;
  transform:rotate(-.5deg);
}
.pol .cap .no{
  color:var(--moss);margin-right:8px;font-size:15px;
  font-family:'Cormorant Garamond',serif;font-style:italic;
}

/* 사진이 아직 없는 빈자리 — 현상 전의 필름처럼 어둡게 */
.pol.empty{cursor:default;}
.pol.empty .slot{
  width:100%;
  border:1.5px dashed rgba(239,234,221,.28);
  background:var(--board-deep);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.pol.empty .slot span{
  font-family:var(--pen);font-size:21px;color:rgba(239,234,221,.42);
  transform:rotate(-1deg);line-height:1.5;
}
.pol.empty:hover{
  transform:rotate(0deg) translateY(-3px);
  box-shadow:0 5px 12px rgba(0,0,0,.5), 0 24px 40px -16px rgba(0,0,0,.6);
}

/* 사진 사이 숨쉬는 문장 */
.breath{
  display:inline-block;width:100%;
  margin:0 0 14px;padding:34px 22px;
  break-inside:avoid;
  text-align:center;
  font-size:15.5px;line-height:2.2;color:var(--ivory-soft);
  border-top:1px solid rgba(239,234,221,.2);
  border-bottom:1px solid rgba(239,234,221,.2);
}
.breath .src{
  display:block;margin-top:12px;
  font-family:var(--sans);font-weight:300;font-size:10px;
  letter-spacing:.35em;color:var(--moss);
}

/* ---------- lightbox (사진 + 글이 앉는 뒷면) ---------- */
.lb{
  position:fixed;inset:0;z-index:100;
  background:rgba(20,18,14,.92);
  display:none;align-items:center;justify-content:center;
  padding:4vh 4vw;
}
.lb.open{display:flex;}
.lb .lb-card{
  background:var(--paper);
  padding:16px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7);
  max-width:min(92vw,1080px);
  max-height:88vh;
  display:flex;gap:0;
  animation:lbIn .35s cubic-bezier(.2,.8,.25,1);
  overflow:hidden;
}
@keyframes lbIn{from{transform:scale(.94) rotate(-.8deg);opacity:0;}to{transform:none;opacity:1;}}
.lb .lb-photo{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;justify-content:center;
  background:#f2efe7;
}
.lb .lb-photo img{max-width:100%;max-height:calc(88vh - 32px);width:auto;height:auto;display:block;}
/* 글이 앉는 자리 */
.lb .lb-text{
  flex:0 0 320px;
  padding:34px 30px 28px 34px;
  display:flex;flex-direction:column;
  overflow-y:auto;
  color:var(--ink);
}
.lb .lb-text .t-no{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:15px;color:#7a815f;letter-spacing:.08em;
}
.lb .lb-text .t-cap{
  font-family:var(--pen);font-size:26px;color:var(--ink);
  margin-top:10px;line-height:1.4;transform:rotate(-.5deg);
}
.lb .lb-text .t-body{
  margin-top:24px;
  font-family:var(--serif);font-size:14.5px;line-height:2.15;
  color:var(--ink-soft);
  white-space:pre-line;
  flex:1;
}
.lb .lb-text .t-body:empty::before{
  content:'아직 적힌 글이 없습니다.';
  color:rgba(28,26,22,.3);font-family:var(--pen);font-size:19px;
}
.lb .lb-text .t-date{
  margin-top:26px;
  font-family:var(--sans);font-weight:300;font-size:10.5px;
  letter-spacing:.3em;color:rgba(28,26,22,.45);
}
.lb-close{
  position:fixed;top:26px;right:34px;
  font-family:var(--sans);font-weight:300;font-size:12px;
  letter-spacing:.3em;color:rgba(253,252,248,.85);cursor:pointer;z-index:101;
}
@media(max-width:820px){
  .lb{padding:3vh 4vw;}
  .lb .lb-card{flex-direction:column;max-height:90vh;overflow-y:auto;}
  .lb .lb-photo img{max-height:56vh;}
  .lb .lb-text{flex:0 0 auto;padding:24px 18px 16px;}
}

/* ---------- footer ---------- */
footer{
  padding:70px 40px 50px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--sans);font-weight:300;font-size:11px;
  letter-spacing:.2em;color:var(--ivory-soft);
}
.music{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;transition:opacity .3s;}
.music:hover{opacity:.6;}
.music .eq{display:flex;gap:2.5px;align-items:flex-end;height:12px;}
.music .eq i{width:2px;background:var(--moss);height:4px;}
.music.playing .eq i{animation:eq 1s ease-in-out infinite;}
.music.playing .eq i:nth-child(2){animation-delay:.2s;}
.music.playing .eq i:nth-child(3){animation-delay:.4s;}
@keyframes eq{0%,100%{height:4px;}50%{height:12px;}}

@media(max-width:800px){
  header{padding:16px 20px;}
  nav{display:none;}
  .intro{padding:130px 20px 50px;}
  .wall{padding:16px 14px 40px;}
  footer{flex-direction:column;gap:16px;}
}

/* ---------- smartphone (가지런하게) ---------- */
@media(max-width:520px){
     header{padding:14px 18px;}
     .logo{font-size:14px;}
     .intro{padding:104px 22px 36px;}
     .intro h1{font-size:24px;line-height:1.75;}
     .wall{
            columns:1;
            max-width:440px;
            padding:8px 20px 36px;
     }
     .pol{
            margin:0 0 20px;
            padding:9px 9px 36px;
     }
     .pol:nth-child(6n+1){transform:rotate(-.5deg);}
     .pol:nth-child(6n+2){transform:rotate(.4deg);}
     .pol:nth-child(6n+3){transform:rotate(-.3deg);}
     .pol:nth-child(6n+4){transform:rotate(.5deg);}
     .pol:nth-child(6n+5){transform:rotate(-.4deg);}
     .pol:nth-child(6n+6){transform:rotate(.3deg);}
     .pol .cap{font-size:17px;bottom:7px;}
     .pol .cap .no{font-size:13px;}
     .pol.empty .slot span{font-size:19px;}
     .lb{padding:0;}
     .lb .lb-card{
            width:100%;max-width:100%;
            max-height:100dvh;height:100dvh;
            padding:12px;
            flex-direction:column;overflow-y:auto;
     }
     .lb .lb-photo{flex:0 0 auto;background:none;}
     .lb .lb-photo img{max-height:60dvh;}
     .lb .lb-text{flex:0 0 auto;padding:22px 12px 34px;}
     .lb .lb-text .t-cap{font-size:23px;}
     .lb .lb-text .t-body{font-size:14px;line-height:2.1;}
     .lb-close{
            top:auto;bottom:18px;right:auto;left:50%;
            transform:translateX(-50%);
            background:rgba(24,22,17,.7);
            padding:10px 22px;border-radius:20px;
     }
     footer{padding:50px 20px 40px;font-size:10px;}
}

/* gothic unification - all text Noto Sans KR */
:root{--serif:'Noto Sans KR',sans-serif;--pen:'Noto Sans KR',sans-serif;}
body{font-weight:300;}
.intro h1{font-weight:300;letter-spacing:.26em;text-transform:lowercase;}
.intro h1 .dot{color:var(--moss);font-weight:700;margin:0 .1em;}
.pol .cap{font-size:12.5px;font-weight:400;letter-spacing:.14em;transform:none;color:var(--ink-soft);}
.pol .cap .no{font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.1em;}
.pol.empty .slot span{font-family:var(--sans);font-weight:300;font-size:13px;letter-spacing:.14em;line-height:2.1;transform:none;}
.lb .lb-text .t-no{font-family:var(--sans);font-style:normal;font-size:10.5px;letter-spacing:.3em;}
.lb .lb-text .t-cap{font-size:19px;font-weight:500;transform:none;letter-spacing:.04em;}
.lb .lb-text .t-body{font-weight:300;}
.lb .lb-text .t-body:empty::before{font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;}

/* ---------- hero + past strip ---------- */
.pol.hero{display:block;max-width:640px;margin:0 auto;transform:none;}
.pol.hero:hover{transform:translateY(-4px) scale(1.005);}
.past{
  margin-top:72px;
  display:flex;flex-wrap:wrap;gap:18px;
  justify-content:center;align-items:flex-start;
}
.pol.mini{width:132px;margin:0;padding:6px 6px 24px;transform:none;}
.pol.mini:hover{transform:translateY(-4px) scale(1.03);}
.pol.mini .cap{font-size:9px;bottom:6px;letter-spacing:.12em;}
.pol.mini .cap .no{font-size:9px;margin-right:0;}
.pol.mini.tape::before{width:40px;height:12px;top:-5px;}
.pol.mini.tape-corner::before{width:36px;height:11px;top:-5px;left:-9px;}
.pol.mini.empty .slot span{font-size:10px;line-height:1.8;}
@media(max-width:520px){
  .pol.hero{max-width:100%;}
  .pol.mini{width:100px;margin:0;padding:5px 5px 20px;}
  .past{gap:12px;margin-top:48px;}
}