/* =========================================================
   only-profile-detail — Trânsito Only 프로필 진행과정 상세
   (glam-detail의 트란시투 섹션만 추출 / 글램 윗부분 제외)
   ========================================================= */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");

/* =========================================================
   Design tokens — Colors & Type (glam-detail와 동일)
   ========================================================= */
.only-profile-detail-host {
  /* Neutral canvas */
  --paper:   #F7F4EE;
  --sand:    #E8DFCF;
  --mist:    #E6E6E3;
  --line:    #D9D4C8;
  --ink:     #0F0F10;
  --ink-2:   #3A3A3C;
  --ink-3:   #77756F;
  --white:   #FFFFFF;
  /* Fonts */
  --font-sans: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  /* 글램 핑크 */
  --glam-pink:        #FF3D8B;
  --glam-pink-dark:   #E32874;
  --glam-pink-soft:   #FFE7F0;
  --glam-pink-50:     #FFF4F8;
  --glam-magenta:     #D81B7A;
  --glam-diamond-1:   #FF1F87;
  --glam-diamond-2:   #FF5BA3;
  /* 트란시투 아이보리/골드 */
  --trn-bg:           #F5EFE3;
  --trn-bg-2:         #EDE5D2;
  --trn-bg-card:      #FFFFFF;
  --trn-red:          #C29A4B;
  --trn-red-deep:     #8B6A2C;
  --trn-burgundy:     #3A2418;
  --trn-cream:        #1F1816;
  --trn-fog:          #7A6B5A;
  --trn-line-dark:    rgba(31,24,22,0.18);
  --trn-line-darker:  rgba(31,24,22,0.08);
  /* 글램 라이트 */
  --light-bg:         #FFFFFF;
  --light-bg-alt:     #F8F8FA;
  --light-fg:         #1A1A1F;
  --light-fg-2:       #4F4F5A;
  --light-fg-3:       #8E8E96;
  --light-line:       #ECECEF;

  /* 마운트 호스트 자체는 페이지 흐름 안에 자연스럽게 통합 */
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,0.06);
  overflow: hidden;
  border-radius: 16px;
  -webkit-font-smoothing: antialiased;
}

/* 사진/영상 다운로드 차단 — 호스트 내부로 한정 */
.only-profile-detail-host img,
.only-profile-detail-host video {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  pointer-events: auto;
}

.only-profile-detail-host * {
  box-sizing: border-box;
}

.only-profile-detail-host *::-webkit-scrollbar { width: 0; height: 0; display: none; }
.only-profile-detail-host * { scrollbar-width: none; }

/* =========================================================
   Page (마운트된 detail-page) — 페이지 흐름에 통합
   ========================================================= */
.only-profile-detail-host .page.detail-page,
.only-profile-detail-host .detail-page {
  width: 100%;
  background: #FFF;
  overflow: visible;
}

.only-profile-detail-host .page {
  background: var(--light-bg);
  color: var(--light-fg);
  font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  font-size: 19.0px;
  line-height: 1.55;
  letter-spacing: -0.015em;
  width: 100%;
  overflow: hidden;
}
.only-profile-detail-host .page h1,
.only-profile-detail-host .page h2,
.only-profile-detail-host .page h3 { font-family: inherit; font-weight: inherit; margin: 0; }
.only-profile-detail-host .page .glam-display,
.only-profile-detail-host .page h1.glam-display,
.only-profile-detail-host .page h2.glam-display,
.only-profile-detail-host .page h3.glam-display {
  font-family: 'Pretendard Variable', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}
.only-profile-detail-host .page .trn-block,
.only-profile-detail-host .page [data-mode="dark"] {
  font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  letter-spacing: -0.01em;
}

/* =========================================================
   Top bar (페이지 내부 상단 바)
   ========================================================= */
.only-profile-detail-host .dp-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 48px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--light-line);
}
.only-profile-detail-host .dp-topbar.is-dark {
  background: rgba(245,239,227,0.92);
  border-bottom-color: var(--trn-line-darker);
  color: var(--trn-cream);
}
.only-profile-detail-host .dp-topbar .icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: inherit; cursor: pointer; padding: 0;
}
.only-profile-detail-host .dp-topbar .title-mono {
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit; opacity: 0.72;
  font-weight: 600;
}

/* =========================================================
   Sticky CTA — 내부에서 sticky bottom
   ========================================================= */
.only-profile-detail-host .dp-sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: transparent;
  border-top: 0;
  padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.only-profile-detail-host .dp-sticky-cta .cta { pointer-events: auto; }
.only-profile-detail-host .dp-sticky-cta .heart {
  width: 48px;
  border: 1px solid var(--light-line);
  border-radius: 12px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: #B0B0B8;
  cursor: pointer;
}
.only-profile-detail-host .dp-sticky-cta .heart.is-on {
  color: var(--glam-pink); border-color: #FFD2E1;
}
.only-profile-detail-host .dp-sticky-cta .cta {
  flex: 1;
  height: 58px;
  border-radius: 14px;
  border: 0;
  background: linear-gradient(90deg, var(--glam-diamond-1) 0%, var(--glam-pink-dark) 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none;
  transition: transform 80ms ease-out, filter 200ms ease-out, background 500ms ease-out;
}
.only-profile-detail-host .dp-sticky-cta.is-dark .cta {
  background: linear-gradient(90deg, var(--trn-red) 0%, var(--trn-red-deep) 100%);
  box-shadow: none;
}
.only-profile-detail-host .dp-sticky-cta .cta:active {
  transform: scale(0.98); filter: brightness(0.96);
}

/* =========================================================
   Section helpers
   ========================================================= */
.only-profile-detail-host .sec { padding: 56px 20px; }
.only-profile-detail-host .sec.tight { padding: 36px 20px; }
.only-profile-detail-host .sec-h-kicker {
  font-size: 17.0px; letter-spacing: 0.04em;
  color: var(--glam-pink); font-weight: 700;
  margin: 0 0 6px; text-align: center;
}
.only-profile-detail-host .sec-h {
  font-family: var(--font-sans);
  font-size: 27.0px; font-weight: 800;
  line-height: 1.32; letter-spacing: -0.02em;
  text-align: center; margin: 0;
  color: var(--light-fg);
}
.only-profile-detail-host .sec-h .pink,
.only-profile-detail-host .sec-h em { color: var(--glam-pink); font-style: normal; }
.only-profile-detail-host .sec-sub {
  margin-top: 10px; font-size: 18.5px;
  color: var(--light-fg-2); text-align: center; line-height: 1.62;
}

/* Tier badge (트란시투 섹션에서 일부 사용) */
.only-profile-detail-host .tier-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 15.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 9px; border-radius: 999px;
}
.only-profile-detail-host .tier-badge.gold { background: #2A2622; color: #F4D26B; }
.only-profile-detail-host .tier-badge.diamond {
  background: linear-gradient(90deg, var(--glam-diamond-1), var(--glam-diamond-2));
  color: #fff;
}

/* Trn dark overrides */
.only-profile-detail-host .trn-block {
  background: var(--trn-bg); color: var(--trn-cream); font-family: var(--font-sans);
}
.only-profile-detail-host .trn-block .sec-h { color: var(--trn-cream); }
.only-profile-detail-host .trn-block .sec-sub { color: var(--trn-fog); }
.only-profile-detail-host .trn-block .sec-h-kicker { color: var(--trn-red); }
.only-profile-detail-host .trn-display {
  font-family: var(--font-serif); letter-spacing: 0.02em; font-weight: 500;
}
.only-profile-detail-host .divider-line {
  height: 1px; background: var(--light-line); margin: 0 20px;
}
.only-profile-detail-host .tnum { font-variant-numeric: tabular-nums; }
.only-profile-detail-host .no-scrollbar::-webkit-scrollbar { display: none; }
.only-profile-detail-host .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Keyframes */
@keyframes opdBarGrow { from { height: 0; } }
@keyframes opdFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }