/* === HEADER === */
.hdr {
      flex-shrink: 0; height: 50px;
      background: var(--surf); border-bottom: 1px solid var(--brd);
      display: flex; align-items: center; gap: 9px; padding: 0 13px; z-index: 50;
    }
    .ham { width: 30px; height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; flex-shrink: 0; }
    .ham span { display: block; width: 17px; height: 2px; background: var(--sub); border-radius: 2px; }
    .logo { background: var(--logo-bg); color: #fff; font-size: 10px; font-weight: 900; padding: 4px 8px; border-radius: 5px; cursor: pointer; flex-shrink: 0; letter-spacing: 0.3px; }
    .t-nf .logo { border-radius: 2px; }
    .srch { flex: 1; height: 27px; background: var(--bar); border: 1px solid var(--brd); border-radius: 14px; min-width: 0; display: flex; align-items: center; padding: 0 12px; font-size: 9px; color: var(--sub); opacity: 0.7; cursor: pointer; }
    .t-nf .srch { border-radius: 3px; }
    .av { width: 27px; height: 27px; border-radius: 50%; background: var(--bar); border: 1px solid var(--brd); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .av-inner { font-size: 14px; color: var(--sub); display: flex; align-items: center; justify-content: center; font-weight: bold; }

/* === CHIPS & GOAL === */
.chips { flex-shrink: 0; background: var(--surf); border-bottom: 1px solid var(--brd); display: flex; gap: 6px; padding: 6px 13px; overflow-x: auto; }
    .chip { padding: 4px 11px; border-radius: 20px; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; }
    .chip.on { background: var(--pill-on); color: var(--pill-on-t); }
    .chip.off { background: var(--pill-off); color: var(--pill-off-t); border: 1px solid var(--brd); }
    .t-nf .chip { border-radius: 2px; }
    .content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: var(--cp); gap: var(--cg); }
    .goal { display: none; flex-shrink: 0; background: var(--surf); border: 1px solid var(--brd); border-radius: var(--cr); padding: 9px 12px; }
    .goal-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
    .goal-ttl { font-size: 10px; font-weight: 800; }
    .goal-xp { font-size: 10px; font-weight: 700; color: var(--acc); }
    .goal-track { height: 6px; background: var(--bar); border-radius: 3px; overflow: hidden; }
    .goal-fill { height: 100%; background: var(--acc); width: 60%; border-radius: 3px; }

/* === SIDEBAR & DRAWER === */
.sidebar { display: none; width: 64px; flex-shrink: 0; flex-direction: column; align-items: center; padding: 12px 0; gap: 10px; background: var(--surf); border-right: 1px solid var(--brd); z-index: 40; }
    .sb-item { width: 40px; height: 40px; border-radius: var(--cr); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; }
    .sb-item:hover, .sb-item.on { background: var(--bar); }
    .sb-item svg { width: 18px; height: 18px; fill: var(--sub); }
    .sb-item.on svg { fill: var(--acc); }
    .sb-item svg [stroke] { stroke: var(--sub); fill: none; }
    .sb-item.on svg [stroke] { stroke: var(--acc); fill: none; }
    .t-nf .sb-item { border-radius: 4px; }
    .drw-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity .3s; }
    .drw-ov.open { opacity: 1; pointer-events: all; }
    .drw { position: fixed; top: 0; left: -240px; width: 240px; height: 100%; background: var(--surf); z-index: 2001; transition: left .3s; padding: 16px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; box-shadow: 2px 0 10px rgba(0,0,0,.1); }
    .drw.open { left: 0; }
    .drw-close { position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 16px; color: var(--sub); cursor: pointer; }
    .drw-ttl { font-size: 12px; font-weight: 800; color: var(--txt); }
    .stat-row { display: flex; gap: 6px; }
    .stat { flex: 1; background: var(--surf); border: 1px solid var(--brd); border-radius: var(--cr); padding: 8px 6px; text-align: center; }
    .stat-v { font-size: 16px; font-weight: 800; color: var(--acc); }
    .stat-l { font-size: 7px; color: var(--sub); margin-top: 2px; }
    .drw-dg { display: flex; align-items: center; gap: 8px; background: var(--surf); border: 1px solid var(--brd); border-radius: var(--cr); padding: 7px 12px; }
    .drw-dg-tr { flex: 1; height: 6px; background: var(--bar); border-radius: 3px; overflow: hidden; }
    .drw-dg-fl { height: 100%; background: var(--acc); border-radius: 3px; width: 60%; }
    .divider { height: 1px; background: var(--brd); }
    .drw-sl { font-size: 8px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .04em; }
    .ach-wrap { display: flex; flex-wrap: wrap; gap: 4px; }
    .ach { background: var(--bar); border-radius: 8px; padding: 3px 8px; font-size: 8px; font-weight: 600; color: var(--txt); }
    .ach.lock { opacity: .5; }
    .drw-th { display: flex; gap: 8px; padding: 2px 0; align-items: center; }
    .dt { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: .2s; flex-shrink: 0; }
    .dt.sel { border-color: var(--txt); transform: scale(1.2); }
    .drw-navs { display: flex; flex-direction: column; gap: 4px; }
    .dnavitem { padding: 7px 10px; border-radius: 7px; font-size: 9px; color: var(--txt); cursor: pointer; background: var(--surf); border: 1px solid var(--brd); transition: .2s; }
    .dnavitem:hover { border-color: var(--acc); }

/* === JOURNEY ROW & MODE TABS === */
.journey-row { display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 0 16px; flex-shrink:0; width:100%; }
.cta { background:var(--acc); color:#fff; border:none; border-radius:var(--cr); padding:12px 28px; font-size:12px; font-weight:800; letter-spacing:.04em; cursor:pointer; width:100%; transition:opacity .2s; }
.cta:active { opacity:.85; }

.mode-tabs { display:flex; gap:6px; justify-content:center; width:100%; }
.mode-tab {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  background: var(--bar);
  color: var(--sub);
  border: 1px solid var(--brd);
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
}
.mode-tab.on {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
}

/* === MODE TAB STATUS STATES === */

/* pending: 아직 데이터 없음 — 회색, 클릭 불가 */
.mode-tab.tab-pending {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}

/* analyzing: 데이터 생성 중 — 폄스 pulse */
.mode-tab.tab-analyzing {
  animation: tab-pulse 1.4s ease-in-out infinite;
  border-color: var(--acc);
  color: var(--acc);
}
.mode-tab.tab-analyzing::after {
  content: '';
  position: absolute;
  top: 3px; right: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--acc);
  animation: tab-dot-blink .8s ease-in-out infinite;
}

/* ready: 완료 — 정상색 + 작은 초록 돇 */
.mode-tab.tab-ready::after {
  content: '';
  position: absolute;
  top: 3px; right: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #10b981;
}

@keyframes tab-pulse {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1; }
}
@keyframes tab-dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .15; }
}