/* ============================================================
   KPHOTO — Global Design System
   Palette: soft pink/white light mode (like screenshot)
   ============================================================ */
:root {
  --bg:        #fdf0f3;
  --bg2:       #f8e8ed;
  --surface:   #ffffff;
  --border:    #f0c8d4;
  --border2:   #e8a8bc;
  --pink:      #e05878;
  --pink2:     #c04060;
  --pink-light:#fde8ef;
  --lavender:  #b8a4e8;
  --ink:       #2a1820;
  --ink2:      #7a5868;
  --ink3:      #b89aa8;
  --white:     #ffffff;
  --shadow:    0 2px 16px rgba(200,80,120,.10);
  --shadow-lg: 0 8px 40px rgba(200,80,120,.18);
  --r:         16px;
  --r-sm:      10px;
  --r-lg:      24px;
  --f:         'Outfit', system-ui, sans-serif;
  --f-serif:   'Nanum Myeongjo', Georgia, serif;
  --ease:      cubic-bezier(.4,0,.2,1);
  --spring:    cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--f);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Grid background like screenshot */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, label { cursor: pointer; font-family: var(--f); border: none; background: none; }

/* ---- Utilities ---- */
.relative { position: relative; }
.z1 { position: relative; z-index: 1; }

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253,240,243,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
}
.nav__inner {
  max-width: 480px; margin: 0 auto;
  height: 56px; display: flex; align-items: center; gap: 12px;
}
.nav__logo {
  font-family: var(--f-serif); font-size: 1.2rem; font-weight: 700;
  color: var(--pink); display: flex; align-items: center; gap: 6px;
}
.nav__logo span { font-size: .8rem; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__link {
  padding: 6px 14px; border-radius: 20px;
  font-size: .82rem; font-weight: 600; color: var(--ink2);
  transition: background .15s, color .15s;
}
.nav__link:hover, .nav__link.active {
  background: var(--pink-light); color: var(--pink);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 24px; border-radius: 50px;
  font-size: .9rem; font-weight: 700; font-family: var(--f);
  transition: transform .15s var(--spring), box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn-pink {
  background: var(--pink); color: #fff;
  box-shadow: 0 4px 16px rgba(224,88,120,.3);
}
.btn-pink:hover  { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(224,88,120,.4); }
.btn-pink:active { transform: scale(.96); }

.btn-outline {
  background: var(--white); color: var(--pink);
  border: 2px solid var(--border2);
}
.btn-outline:hover { border-color: var(--pink); background: var(--pink-light); }

.btn-sm { padding: 8px 18px; font-size: .8rem; }
.btn-lg { padding: 16px 36px; font-size: 1rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

/* ---- Card ---- */
.card {
  background: var(--white); border-radius: var(--r);
  border: 1.5px solid var(--border); box-shadow: var(--shadow);
}

/* ---- Toast ---- */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #fff;
  border-radius: 50px; padding: 10px 24px;
  font-size: .85rem; font-weight: 600;
  z-index: 999; transition: transform .3s var(--spring);
  white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---- Animations ---- */
@keyframes fadeUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes popIn    { 0%{transform:scale(.8);opacity:0} 70%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
@keyframes flashW   { 0%{opacity:0} 10%{opacity:1} 100%{opacity:0} }
@keyframes countAnim { 0%{opacity:0;transform:scale(1.5)} 20%{opacity:1;transform:scale(1)} 80%{opacity:1} 100%{opacity:0;transform:scale(.6)} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes thumbPop { 0%{transform:scale(.7);opacity:0} 70%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }

.anim-up  { animation: fadeUp .5s var(--ease) both; }
.anim-pop { animation: popIn .4s var(--spring) both; }
.d1{animation-delay:.08s} .d2{animation-delay:.16s} .d3{animation-delay:.24s} .d4{animation-delay:.32s}

/* ---- LocalStorage helper (defined globally) ---- */