/* ============================================
   MY 페이지 (MY 애널리스트 / MY 종목)
   ============================================ */

.my-section {
  padding: 24px 0 60px;
}

.my-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--color-primary-bg);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.my-tab {
  padding: 8px 18px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-family);
  transition: all .15s;
  white-space: nowrap;
}

.my-tab:hover {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
}

.my-tab.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  font-weight: 600;
}

.my-period {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.my-period button {
  padding: 6px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-family: var(--font-family);
  transition: all .15s;
}

.my-period button:hover {
  background: var(--color-primary-bg);
}

.my-period button.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.my-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.my-card {
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: 50px;
  padding: 12px 10px;
  text-align: center;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all .15s;
  position: relative;
}

.my-card:hover {
  background: var(--color-primary-bg);
  transform: translateY(-2px);
}

.my-card.active {
  background: var(--color-primary-bg);
  border-color: var(--color-primary-dark);
}

.my-card .main {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.my-card .sub {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.my-card .remove {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 11px;
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 4px;
}

.my-card .remove:hover {
  color: var(--color-positive-text);
}

.my-empty {
  background: var(--color-bg-light);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-base);
  margin-bottom: 24px;
}

.my-empty a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

.my-detail {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
}

.my-detail-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.my-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.my-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  min-width: 600px;
}

.my-table th {
  text-align: left;
  padding: 10px 8px;
  color: var(--color-text-secondary);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  background: var(--color-bg-light);
}

.my-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-border-light);
}

.my-table tbody tr:hover {
  background: var(--color-bg-light);
}

.my-table .text-right { text-align: right; }

.my-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}

.my-badge.status-0 { background: #FFF4E0; color: #A9671A; }
.my-badge.status-1 { background: #E6F4EA; color: #2B7A3E; }
.my-badge.status-2 { background: #FDE9E7; color: #B4372A; }

.my-profit-pos { color: var(--color-positive-text); font-weight: 600; }
.my-profit-neg { color: var(--color-negative-text); font-weight: 600; }

/* 관심 토글 아이콘 (firm_detail, stock_info 공용) */
.watch-toggle {
  cursor: pointer;
  font-size: 18px;
  user-select: none;
  line-height: 1;
  margin-left: 4px;
}
.watch-toggle[data-watching="1"] { color: var(--color-primary); }
.watch-toggle[data-watching="0"] { color: var(--color-text-muted); }

.analyst-tag .watch-toggle {
  font-size: 13px;
  margin-left: 4px;
  vertical-align: middle;
}

/* 개인정보 수정 */
.my-profile-wrap {
  max-width: 520px;
  margin: 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 28px 32px;
}

.my-profile-wrap .member-field {
  margin-bottom: 14px;
}

.my-profile-wrap .member-field input[disabled] {
  background: var(--color-bg-light);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

.my-profile-success {
  background: #E6F4EA;
  color: #2B7A3E;
  border: 1px solid #B7DDC2;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: var(--font-size-sm);
}

.my-profile-pw-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin: 8px 0 12px;
}

@media (max-width: 480px) {
  .my-profile-wrap { padding: 20px 18px; border-radius: 10px; }
}

/* 태블릿 */
@media (max-width: 960px) {
  .my-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .my-tabs { padding: 12px; gap: 8px; }
  .my-tab { font-size: 13px; padding: 7px 14px; }
  .my-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .my-card { min-height: 64px; padding: 10px 8px; }
  .my-detail { padding: 14px; }
}

@media (max-width: 480px) {
  .my-tabs { padding: 10px; gap: 6px; }
  .my-tab { font-size: 12px; padding: 6px 12px; }
  .my-period button { font-size: 11px; padding: 5px 10px; }
  .my-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .my-card { min-height: 56px; padding: 8px 6px; border-radius: 40px; }
  .my-card .main { font-size: 12px; }
  .my-card .sub { font-size: 10px; }
  .my-table { font-size: 11px; min-width: 560px; }
}