/* Bottom dock + FAB. Centered to body width (600px). Coral text/icons. */

.todaki-dock {
  position: fixed;
  inset: auto auto 0 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: 60px;
  background: var(--bg);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  z-index: 50;
  font-family: var(--font-kr);
  border-top: 1px solid var(--line-softer);
  box-shadow: 0 -2px 14px rgba(0,0,0,0.05);
}

.todaki-dock__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--pink);
  text-decoration: none;
  padding: 8px 4px;
  transition: opacity var(--t-fast);
}
.todaki-dock__item:hover { opacity: 0.7; }
.todaki-dock__item.is-active {
  color: var(--pink);
  font-weight: 800;
}
.todaki-dock__icon {
  width: 22px;
  height: 22px;
  color: var(--pink);
}
.todaki-dock__item .todaki-icon,
.todaki-dock__item .todaki-icon svg { color: var(--pink); }
.todaki-dock__item .todaki-icon svg path,
.todaki-dock__item .todaki-icon svg circle,
.todaki-dock__item .todaki-icon svg rect,
.todaki-dock__item .todaki-icon svg line,
.todaki-dock__item .todaki-icon svg polyline,
.todaki-dock__item .todaki-icon svg polygon { stroke: var(--pink); }

/* Push page content above the fixed dock. */
body.todaki-home,
body.todaki-wpforo,
body.todaki-listings,
body.todaki-listing,
body.todaki-mypage,
body.todaki-write {
  padding-bottom: 84px;
}

body.todaki-auth .todaki-dock,
body.todaki-auth .todaki-fab {
  display: none !important;
}

/* FAB — coral, anchored INSIDE the body width column (right edge of 600px column). */
.todaki-fab {
  position: fixed;
  /* Center the column at 50% then push to its right edge minus FAB radius */
  left: 50%;
  transform: translateX(calc(300px - 56px - 16px));
  bottom: 76px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(255, 102, 128, 0.42);
  z-index: 60;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.todaki-fab:hover {
  box-shadow: 0 10px 26px rgba(255, 102, 128, 0.55);
}
.todaki-fab:active { transform: translateX(calc(300px - 56px - 16px)) scale(0.95); }
.todaki-fab .todaki-icon { width: 24px; height: 24px; color: #fff; }
.todaki-fab .todaki-icon svg path,
.todaki-fab .todaki-icon svg circle,
.todaki-fab .todaki-icon svg rect,
.todaki-fab .todaki-icon svg line { stroke: #fff; }

/* Narrow viewports: dock is full-width edge-to-edge (no centering needed once vw <= 600). */
@media (max-width: 600px) {
  .todaki-dock { left: 0; transform: none; max-width: 100%; }
  .todaki-fab { left: auto; right: 16px; transform: none; }
  .todaki-fab:active { transform: scale(0.95); }
}