/* ===== Page Layout ===== */

body {
  font-family: var(--font-primary);
  background-color: #bfbfbf;
  background-image: radial-gradient(circle, #888888 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app {
  width: 100%;
  max-width: var(--max-width);
  min-height: 100vh;
  position: relative;
  padding-bottom: 100px;
}

/* ── Header ── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #bfbfbf;
  background-image: radial-gradient(circle, #888888 1px, transparent 1px);
  background-size: 20px 20px;
  padding: 54px var(--space-lg) 0;
}

/* ── Auth ── */
.header__auth {
  position: fixed;
  top: 16px;
  right: var(--space-lg);
  z-index: 200;
}

.auth-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.auth-btn:hover {
  background: #f8f8f8;
  box-shadow: var(--shadow-md);
}

.auth-btn:active {
  transform: scale(0.96);
}

.auth-btn__icon {
  flex-shrink: 0;
}

.auth-terms {
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 6px;
  line-height: 1.4;
}

.auth-terms__link {
  background: none;
  border: none;
  padding: 0;
  font-size: 10px;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.auth-terms__link:hover {
  color: var(--text-primary);
}

.auth-profile {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  background: var(--pill-blue);
  transition: all var(--transition-fast);
}

.auth-profile:hover {
  box-shadow: var(--shadow-md);
  transform: scale(1.05);
}

.auth-profile__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.auth-profile__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #fff;
}

.header__top {
  display: none;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header__logo-icon {
  font-size: var(--fs-xl);
}

.header__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
}

.header__stats {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

/* ── Date Nav ── */
.date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: 0;
}

.date-nav__btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.date-nav__btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.date-nav__btn:active {
  transform: scale(0.9);
}

.date-nav__display {
  text-align: center;
  min-width: 150px;
}

.date-nav__date {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.date-nav__today {
  font-size: 12px;
  color: #121212;
  display: block;
  margin-top: 0;
}

/* ── Progress Bar ── */
.progress-bar {
  height: 2px;
  background: var(--border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 10px;
}

.progress-bar__fill {
  height: 100%;
  background: var(--pill-green);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* ── Packet Strip ── */
.packet-strip {
  padding-top: 20px;
}

/* ── Dual Column View ── */
.packet-strip--dual {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding-top: 54px;
}

.packet-column {
  width: var(--max-width);
  flex-shrink: 0;
}

/* 각 열의 자체 헤더 — 메인 헤더와 동일한 스타일 */
.packet-column__header {
  text-align: center;
  padding: 0 var(--space-lg);
  margin-bottom: 0;
}

.packet-column__date {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.packet-column__today {
  font-size: 12px;
  color: var(--text-secondary);
  display: block;
  margin-top: 0;
}

.packet-column__progress {
  height: 2px;
  background: var(--border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 10px;
}

.packet-column__progress-fill {
  height: 100%;
  background: var(--pill-green);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.packet-column__body {
  padding-top: 20px;
}

/* ── Reset Button ── */
.reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 30px auto 20px;
  padding: 10px 20px;
  font-size: var(--fs-sm);
  color: #000;
  background: transparent;
  border: 1px solid #000;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.reset-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

/* ── Delete Account Button ── */
.delete-account-btn {
  display: none;
  margin: 10px auto 20px;
  padding: 0;
  font-size: 12px;
  color: #666;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.delete-account-btn.visible {
  display: block;
}

/* ── App Footer (약관) ── */
.app-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0 24px;
}

.app-footer__copyright {
  font-size: 11px;
  color: #121212;
  margin-top: 40px;
}

.app-footer__links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-footer__link {
  font-size: 11px;
  color: #121212;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast);
}

.app-footer__link:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}

.app-footer__sep {
  font-size: 11px;
  color: #121212;
}

.app-footer__email {
  font-size: 11px;
  color: #121212;
  text-decoration: none;
}

.app-footer__email:hover {
  text-decoration: underline;
}

/* ── FAB ── */
.fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fab-size);
  height: var(--fab-size);
  margin: 30px auto 0;
  border-radius: var(--radius-full);
  background: #f5d442;
  color: #000;
  box-shadow: var(--shadow-fab);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  transition: all var(--transition-base);
}

.fab:hover {
  transform: scale(1.08);
}

.fab:active {
  transform: scale(0.95);
}

/* ── FAB Share ── */
.fab-share {
  position: fixed;
  bottom: 30px;
  left: 20px;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.fab-share:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-fab);
}

.fab-share:active {
  transform: scale(0.95);
}

.fab-share svg {
  display: block;
}

/* ── Responsive ── */

/* 모바일 (480px 이하) */
@media (max-width: 480px) {
  .header {
    padding: 44px var(--space-base) 0;
  }

  .header__auth {
    top: 12px;
    right: var(--space-base);
  }

  .date-nav__date {
    font-size: var(--fs-base);
  }

  .fab {
    width: 50px;
    height: 50px;
    font-size: var(--fs-lg);
  }

  .fab-share {
    bottom: 24px;
    left: 16px;
    width: 40px;
    height: 40px;
  }

  .fab-share svg {
    width: 18px;
    height: 18px;
  }
}

/* 태블릿 이상 */
@media (min-width: 481px) {
  :root { --max-width: 420px; }
}

@media (min-width: 768px) {
  :root { --max-width: 460px; }
}

/* 2열 모드에서 앱 폭 확장 */
.app--dual {
  max-width: calc(var(--max-width) * 2 + 16px);
}

/* 2열 모바일 — 세로 전환 */
@media (max-width: 860px) {
  .packet-strip--dual {
    flex-wrap: wrap;
  }

  .packet-column {
    width: 100%;
    flex-shrink: 1;
  }

  .app--dual {
    max-width: var(--max-width);
  }
}