/* DAINO PICK 앱(로그인 후) 공통 틀과 대시보드 — 토큰·버튼·입력창은 daino-home.css. 모바일 우선. */
.app-page { background: var(--dp-bg); }
.app-page [hidden] { display: none !important; }
.app { min-height: 100vh; min-height: 100dvh; }

/* 사이드바: 데스크톱에서만 */
.app-side { display: none; }

/* 상단바(모바일) */
.app-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 var(--gutter); background: rgba(244, 246, 251, .82); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--dp-line); }
.app-top__user img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #e8edf5; box-shadow: 0 0 0 2px #fff, var(--dp-shadow-1); }

/* 하단 탭(모바일) */
.app-tab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--dp-line); }
.app-tab a { display: grid; justify-items: center; gap: 2px; min-height: 48px; padding-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--dp-muted); border-radius: 12px; }
.app-tab a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-tab a.is-active { color: var(--dp-blue); }

/* 본문 */
.app-main { padding: 20px var(--gutter) calc(96px + env(safe-area-inset-bottom)); max-width: 1180px; }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.app-head__date { font-size: 14px; font-weight: 600; color: var(--dp-muted); }
.app-head__title { margin-top: 4px; font-size: clamp(24px, 6vw, 32px); font-weight: 800; letter-spacing: -.045em; }
.app-head__cta { display: none; }

/* 대시보드 벤토 */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.dash-card { position: relative; padding: 22px; background: var(--dp-surface); border-radius: var(--dp-radius-card); box-shadow: var(--dp-shadow-1); transition: box-shadow .25s ease, transform .25s ease; }
.dash-card:hover { box-shadow: var(--dp-shadow-2); }
.dash-card__label { font-size: 13px; font-weight: 700; color: var(--dp-muted); }
.dash-card__title { margin-top: 6px; font-size: 22px; font-weight: 800; line-height: 1.35; letter-spacing: -.04em; }
.dash-card__title--sm { font-size: 18px; }
.dash-card__desc { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--dp-ink-2); }
.dash-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dash-card__more { flex: none; padding: 6px 10px; font-size: 13px; font-weight: 700; color: var(--dp-blue); border-radius: 999px; background: var(--dp-blue-soft); }
.dash-card__links { display: flex; gap: 16px; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--dp-ink-2); }
.dash-card__links a:hover { color: var(--dp-blue); }

.dash-card--hero { overflow: hidden; background: linear-gradient(160deg, #ffffff 0%, #f3f7ff 100%); box-shadow: var(--dp-shadow-2); }
.dash-card--hero::after { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(18, 107, 255, .16), transparent 65%); pointer-events: none; }
.dash-ask { margin-top: 18px; }
.dash-blogs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--dp-muted); }
.dash-blogs div { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-blogs a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; font-size: 14px; font-weight: 600; color: var(--dp-ink); background: #fff; border: 1px solid rgba(15, 23, 42, .12); border-radius: 999px; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.dash-blogs a:hover { color: var(--dp-blue); border-color: rgba(18, 107, 255, .45); transform: translateY(-1px); }
.dash-blogs img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #e8edf5; }

.dash-plan { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.dash-plan b { font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
.dash-plan__days { font-size: 13px; font-weight: 700; color: var(--dp-blue); }
.dash-coin { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; background: var(--dp-surface-2); border: 1px solid var(--dp-line); border-radius: 16px; }
.dash-coin__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; font-weight: 900; color: #7a4d00; border-radius: 50%; background: linear-gradient(145deg, #ffe08a, #f5b52e); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 6px 14px rgba(245, 181, 46, .35); }
.dash-coin small { display: block; font-size: 12px; color: var(--dp-muted); }
.dash-coin b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

.dash-tracks, .dash-notices { margin: 14px 0 0; padding: 0; list-style: none; }
.dash-tracks li { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--dp-line); }
.dash-tracks li:first-child { border-top: 0; }
.dash-tracks__rank { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; font-size: 18px; font-weight: 800; color: #03a64a; background: #e8f8ee; border-radius: 14px; font-variant-numeric: tabular-nums; }
.dash-tracks__rank.is-none { font-size: 13px; color: var(--dp-muted); background: #eef1f6; }
.dash-tracks__main { flex: 1; min-width: 0; display: grid; }
.dash-tracks__main b { overflow: hidden; font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.dash-tracks__main small { overflow: hidden; font-size: 13px; color: var(--dp-muted); white-space: nowrap; text-overflow: ellipsis; }
.dash-delta { flex: none; padding: 3px 9px; font-size: 13px; font-weight: 700; border-radius: 999px; }
.dash-delta--up { color: #0b7a3c; background: #d9f6e5; }
.dash-delta--down { color: #b3261e; background: #fdecec; }
.dash-delta--same { color: var(--dp-muted); background: #eef1f6; }
.dash-empty { display: grid; gap: 12px; justify-items: start; margin-top: 14px; padding: 18px; background: var(--dp-surface-2); border: 1px dashed #cdd5e1; border-radius: 16px; }
.dash-empty p { font-size: 14px; line-height: 1.6; color: var(--dp-ink-2); }
.dash-empty b { display: block; color: var(--dp-ink); }

.dash-status { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 18px; }
.dash-status__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dp-muted); }
.dash-status.is-on .dash-status__dot { background: var(--dp-good); box-shadow: 0 0 0 4px rgba(18, 161, 80, .15); }
.dash-status.is-off .dash-status__dot { background: var(--dp-warn); }
.dash-card--notify .btn { margin-top: 14px; }

.dash-notices li { border-top: 1px solid var(--dp-line); }
.dash-notices li:first-child { border-top: 0; }
.dash-notices a { display: flex; align-items: center; gap: 10px; padding: 11px 2px; font-size: 14px; }
.dash-notices a:hover b { color: var(--dp-blue); }
.dash-notices b { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; transition: color .2s ease; }
.dash-notices small { flex: none; color: var(--dp-muted); font-size: 12px; }
.dash-notices__kind { flex: none; padding: 2px 8px; font-size: 11.5px; font-weight: 700; color: var(--dp-blue); background: var(--dp-blue-soft); border-radius: 999px; }
.dash-notices__kind.is-update { color: #6b46ff; background: #efeaff; }
.dash-notices .dash-muted { padding: 11px 2px; font-size: 14px; color: var(--dp-muted); }

.dash-tools { display: grid; gap: 10px; margin-top: 14px; }
.dash-tools a { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px; border: 1px solid var(--dp-line); border-radius: 16px; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.dash-tools a:hover { border-color: rgba(18, 107, 255, .35); background: #f8fbff; transform: translateY(-2px); }
.dash-tools__icon { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.dash-tools__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-tools__icon--blue { color: var(--dp-blue); background: var(--dp-blue-soft); }
.dash-tools__icon--green { color: #03a64a; background: #e4f7ec; }
.dash-tools__icon--gray { color: var(--dp-ink-2); background: #eef1f6; }
.dash-tools b { font-size: 15px; }
.dash-tools small { font-size: 13px; color: var(--dp-muted); }

.dash-skeleton { height: 44px; margin-top: 10px; border-radius: 12px; background: linear-gradient(90deg, #eef1f6 0%, #f7f9fc 50%, #eef1f6 100%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (min-width: 640px) {
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-card--hero, .dash-card--place { grid-column: 1 / -1; }
  .dash-tools { grid-template-columns: repeat(3, 1fr); }
  .ask--single .ask__box { grid-template-columns: 1fr auto; }
  .dash-card--tools { grid-column: 1 / -1; }
  .app-head__cta { display: inline-flex; }
}

@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .app-top, .app-tab { display: none; }
  .app-side {
    position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 24px;
    padding: 24px 16px; border-right: 1px solid var(--dp-line); background: rgba(255, 255, 255, .6);
  }
  .app-side__brand { padding: 0 10px; }
  .app-nav { display: grid; gap: 2px; }
  .app-nav__label { margin: 18px 12px 6px; font-size: 12px; font-weight: 700; color: var(--dp-muted); }
  .app-nav__item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--dp-ink-2); border-radius: 12px; transition: background .2s ease, color .2s ease; }
  .app-nav__item svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .app-nav__item:hover { color: var(--dp-ink); background: rgba(15, 23, 42, .04); }
  .app-nav__item.is-active { color: var(--dp-blue); background: var(--dp-blue-soft); }
  .app-nav__item--quiet { font-size: 14px; color: var(--dp-muted); }
  .app-user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px; border-radius: 16px; background: var(--dp-surface); box-shadow: var(--dp-shadow-1); transition: box-shadow .2s ease; }
  .app-user:hover { box-shadow: var(--dp-shadow-2); }
  .app-user__avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #e8edf5; }
  .app-user__meta { display: grid; min-width: 0; }
  .app-user__meta b { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
  .app-user__meta small { font-size: 12px; color: var(--dp-muted); }
  .app-main { padding: 36px 40px 56px; }
  .app-head { margin-bottom: 24px; }
  .dash { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .dash-card { padding: 24px; }
  .dash-card--hero { grid-column: span 4; }
  .dash-card--account { grid-column: span 2; }
  .dash-card--place { grid-column: span 4; }
  .dash-card--notify { grid-column: span 2; }
  .dash-card--notice { grid-column: span 3; }
  .dash-card--tools { grid-column: span 3; }
  .dash-card--tools .dash-tools { grid-template-columns: 1fr; }
  .dash-card__title { font-size: 26px; }
  .dash-card__title--sm { font-size: 18px; }
}

/* 기능 화면 공통: 페이지 제목·보기 전환 탭 */
.app-head--page { flex-wrap: wrap; align-items: flex-end; }
.app-head__desc { margin-top: 6px; max-width: 42em; font-size: 15px; line-height: 1.6; color: var(--dp-ink-2); }
.app-subtabs { display: inline-flex; gap: 4px; padding: 4px; background: #e9edf4; border-radius: 14px; }
.app-subtab { padding: 8px 14px; font-size: 14px; font-weight: 700; color: var(--dp-ink-2); border-radius: 10px; transition: background .2s ease, color .2s ease; }
.app-subtab:hover { color: var(--dp-ink); }
.app-subtab.is-active { color: var(--dp-ink); background: #fff; box-shadow: var(--dp-shadow-1); }
.app-login { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: auto; font-weight: 700; color: #fff; background: var(--dp-ink); border-radius: 14px; }
.app-tool { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .app-main--tool { max-width: 1100px; }
}