/* ================= MY DNA workspace ================= */

.md-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0 26px;
}
.md-header h1 { font-size: 32px; font-weight: 800; }
.md-header p { font-size: 13.5px; color: var(--dr-ink-soft); margin-top: 6px; }
.md-ip-switcher { position: relative; }

/* Current-project card — doubles as the project-switcher trigger, replacing
   the old small "📁 title ▾" chip with a real cover thumbnail + title so
   it's obvious at a glance which project MY DNA is showing. */
.md-ip-hero { flex: 1 1 400px; max-width: 520px; }
/* Whole chip sized up ~50% from its original (56px thumb / 15.5px title /
   11px badge / 15px chevron) so it reads as the primary control it is.
   DNA/대표 badges sit under the title (not beside it) so the fixed-width
   thumb + chevron don't crowd out the title on a real project name. */
.md-current-ip-card {
  display: flex; align-items: center; gap: 21px; width: 100%;
  padding: 15px 24px 15px 10px; border-radius: var(--dr-radius);
  background: var(--dr-panel); border: 1px solid var(--dr-border); box-shadow: var(--dr-shadow);
  cursor: pointer; font-family: inherit; text-align: left; transition: border-color 0.15s;
}
.md-current-ip-card:hover { border-color: var(--dr-purple); }
.md-current-ip-thumb {
  width: 84px; height: 84px; border-radius: 21px; flex-shrink: 0;
  background-color: var(--dr-active-bg); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; color: var(--dr-purple);
}
.md-current-ip-thumb svg { width: 33px; height: 33px; }
.md-current-ip-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.md-current-ip-eyebrow { font-size: 11px; font-weight: 700; color: var(--dr-ink-soft); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
.md-current-ip-title { font-size: 20px; font-weight: 800; color: var(--dr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-current-ip-meta { display: flex; align-items: center; gap: 6px; }
.md-current-ip-featured {
  flex-shrink: 0; font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(120deg, var(--dr-purple), #a78bfa); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.md-current-ip-dna {
  flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--dr-purple);
  background: var(--dr-active-bg); padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.md-current-ip-card .chev { width: 22px; height: 22px; color: var(--dr-ink-soft); flex-shrink: 0; transition: transform 0.15s; }
.md-ip-switcher.open .md-current-ip-card .chev { transform: rotate(180deg); }

/* Sits visually on top of the thumb (same box: 10px inset, matching the
   thumb's own size) as a sibling button — not nested inside
   .md-current-ip-card, since that's already a <button> and buttons can't
   contain buttons. */
.md-current-ip-thumb-edit {
  position: absolute; top: 15px; left: 10px; width: 84px; height: 84px;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 4px;
  border: none; background: transparent; cursor: pointer; border-radius: 21px; font-family: inherit;
}
.md-current-ip-thumb-edit svg {
  width: 20px; height: 20px; padding: 6px; border-radius: 50%;
  background: rgba(20,16,30,0.65); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: background 0.15s;
}
.md-current-ip-thumb-edit:hover svg { background: var(--dr-purple); }

@media (max-width: 760px) {
  .md-ip-hero { max-width: 100%; }
}

.md-ip-switcher-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  width: 310px; max-height: 340px; overflow-y: auto;
  background: var(--dr-panel); border: 1px solid var(--dr-border); border-radius: 14px;
  box-shadow: var(--dr-shadow); padding: 8px;
}
.md-ip-switcher-empty { padding: 12px 10px; font-size: 12px; color: var(--dr-ink-soft); }
.md-ip-switcher-item { display: flex; align-items: center; gap: 2px; }
.md-ip-switcher-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  padding: 9px 10px; border-radius: 10px; border: none; background: none;
  font-family: inherit; text-align: left; cursor: pointer; color: var(--dr-ink);
}
.md-ip-switcher-row:hover { background: var(--dr-bg); }
.md-ip-switcher-row.active { background: var(--dr-active-bg); }
.md-ip-switcher-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dr-purple); flex-shrink: 0; opacity: 0; }
.md-ip-switcher-row.active .dot { opacity: 1; }
.md-ip-switcher-row .info { flex: 1; min-width: 0; }
.md-ip-switcher-row .t { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-ip-switcher-row .m { font-size: 10.5px; color: var(--dr-ink-soft); margin-top: 1px; }
.md-ip-switcher-featured-tag {
  flex-shrink: 0; font-size: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(120deg, var(--dr-purple), #a78bfa); padding: 3px 8px; border-radius: 999px;
}
.md-ip-switcher-star {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: none; background: none;
  color: var(--dr-ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.md-ip-switcher-star:hover { background: var(--dr-bg); color: #e0a530; }
.md-ip-switcher-star.active { color: #e0a530; }
.md-ip-switcher-star svg { width: 16px; height: 16px; }
.md-ip-switcher-divider { height: 1px; background: var(--dr-border); margin: 6px 4px; }
.md-ip-switcher-new {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border-radius: 10px; text-decoration: none;
  font-size: 12.5px; font-weight: 700; color: var(--dr-purple);
}
.md-ip-switcher-new:hover { background: var(--dr-active-bg); }
.md-ip-switcher-new svg { width: 14px; height: 14px; }
.md-ip-switcher-manage {
  display: block; width: 100%; padding: 9px 10px; border-radius: 10px; text-decoration: none;
  font-size: 11.5px; font-weight: 700; color: var(--dr-ink-soft); text-align: center;
}
.md-ip-switcher-manage:hover { background: var(--dr-bg); color: var(--dr-ink); }

.md-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.md-publish-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--dr-purple);
  background: var(--dr-purple); color: #fff; font-size: 12.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.md-publish-btn svg { width: 14px; height: 14px; }
.md-publish-btn.published { background: var(--dr-panel); color: #2fae63; border-color: #2fae63; }
.md-publish-btn.locked { background: var(--dr-panel); color: var(--dr-ink-soft); border-color: var(--dr-border); cursor: default; }

.md-help-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--dr-panel);
  border: 1px solid var(--dr-border);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--dr-ink);
  box-shadow: var(--dr-shadow);
  cursor: pointer;
}
.md-help-btn svg { width: 14px; height: 14px; color: var(--dr-ink-soft); }

.md-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 22px;
  align-items: start;
}
.md-col-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.md-col-side { display: flex; flex-direction: column; gap: 18px; }

/* Sub-tabs (개요 / ASSETS / DISCUSSION) */
.md-tabs {
  display: flex; gap: 4px; width: fit-content; max-width: 100%; overflow-x: auto;
  background: var(--dr-panel); border: 1px solid var(--dr-border);
  padding: 4px; border-radius: 999px; box-shadow: var(--dr-shadow);
}
.md-tab { padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--dr-ink-soft); border: none; background: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.md-tab.active { background: var(--dr-purple); color: #fff; }
.md-tab-panel { display: none; }
.md-tab-panel.active { display: flex; flex-direction: column; gap: 20px; }

.md-section-label { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.md-section-label .num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--dr-purple); color: #fff;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.md-section-label .t { font-size: 15px; font-weight: 800; }
.md-section-label .hint { font-size: 12px; color: var(--dr-ink-soft); }
.md-badge {
  font-size: 11px; font-weight: 700; color: var(--dr-purple);
  background: var(--dr-active-bg); padding: 4px 10px; border-radius: 999px;
}

.md-panel {
  background: var(--dr-panel);
  border: 1px solid var(--dr-border);
  border-radius: var(--dr-radius);
  padding: 22px;
  box-shadow: var(--dr-shadow);
  transition: box-shadow 0.2s;
}
.md-panel.flash-highlight { box-shadow: 0 0 0 3px var(--dr-purple); }

/* ---- 지원자 확인 (applicants for this IP's CREW MATCH postings) ---- */
.md-applicants-alert { border: 1.5px solid var(--dr-purple); background: var(--dr-active-bg); }
.md-applicant-item + .md-applicant-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dr-border); }
.md-applicant-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.md-applicant-name {
  font-weight: 700; background: none; border: none; padding: 0; cursor: pointer; color: var(--dr-ink);
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.md-applicant-name:hover { color: var(--dr-purple); }
.md-applicant-meta { color: var(--dr-ink-soft); font-size: 11.5px; }
.md-applicant-actions { margin-left: auto; display: flex; gap: 6px; }
.md-applicant-accept, .md-applicant-reject {
  font-size: 10.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--dr-border);
  background: var(--dr-panel); cursor: pointer;
}
.md-applicant-accept { color: #2fae66; border-color: #2fae66; }
.md-applicant-accept:hover { background: rgba(61,220,132,0.14); }
.md-applicant-reject { color: #d64545; border-color: #d64545; }
.md-applicant-reject:hover { background: rgba(229,72,77,0.14); }
.md-applicant-detail {
  margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--dr-panel); font-size: 11.5px;
}
.md-applicant-detail-role { font-weight: 700; color: var(--dr-purple); margin-bottom: 4px; }
.md-applicant-detail-bio { color: var(--dr-ink); line-height: 1.5; }
.md-applicant-detail-portfolio { color: var(--dr-ink-soft); margin-top: 6px; }
.md-applicant-detail-message { color: var(--dr-ink); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--dr-border); line-height: 1.5; font-style: italic; }

/* ---- Goal selector ---- */
.md-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.md-goal {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 10px;
  border-radius: 18px;
  border: 1.5px solid var(--dr-border);
  background: var(--dr-panel);
  cursor: pointer;
  font-weight: 700; font-size: 14px; color: var(--dr-ink);
  transition: transform 0.15s, box-shadow 0.15s;
}
.md-goal:hover { transform: translateY(-2px); }
.md-goal .goal-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--dr-bg);
  display: flex; align-items: center; justify-content: center;
}
.md-goal .goal-ic svg { width: 21px; height: 21px; color: var(--dr-purple); }
.md-goal.active {
  background: linear-gradient(135deg, var(--dr-purple), #8f6bff);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 28px rgba(109,77,230,0.32);
}
.md-goal.active .goal-ic { background: rgba(255,255,255,0.18); }
.md-goal.active .goal-ic svg { color: #fff; }
.md-goal-check {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: var(--dr-purple);
  display: flex; align-items: center; justify-content: center;
}
.md-goal-check svg { width: 11px; height: 11px; }

.md-genre-section { margin-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-genre-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.md-genre-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--dr-purple);
  background: var(--dr-active-bg); padding: 5px 6px 5px 12px; border-radius: 999px;
}
.md-genre-remove {
  width: 16px; height: 16px; border-radius: 50%; border: none; background: none;
  color: var(--dr-purple); font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0.7;
}
.md-genre-remove:hover { opacity: 1; background: rgba(109,77,230,0.15); }
.md-genre-empty { font-size: 12px; color: var(--dr-ink-soft); }
.md-genre-add-btn {
  font-size: 11.5px; font-weight: 700; color: var(--dr-ink-soft);
  background: none; border: 1px dashed var(--dr-border); border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
}
.md-genre-add-btn:hover { color: var(--dr-purple); border-color: var(--dr-purple); }
.md-genre-picker {
  width: 100%; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px; margin-top: 4px; border-radius: 12px; background: var(--dr-bg);
}
.md-genre-picker-chip {
  font-size: 11.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--dr-border); background: var(--dr-panel); color: var(--dr-ink); cursor: pointer;
}
.md-genre-picker-chip.active { background: var(--dr-purple); border-color: var(--dr-purple); color: #fff; }

/* ---- IP status cards ---- */
.md-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.md-status-card { border: 1px solid var(--dr-border); border-radius: 18px; padding: 18px; cursor: pointer; transition: border-color 0.15s; }
.md-status-card:hover { border-color: var(--dr-purple); }
.md-status-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.md-status-left { display: flex; align-items: center; gap: 12px; }
.md-status-ic { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.md-status-ic svg { width: 20px; height: 20px; }
.md-status-card.purple .md-status-ic { background: rgba(143,107,255,0.16); color: var(--dr-purple); }
.md-status-card.blue .md-status-ic { background: rgba(79,176,255,0.16); color: var(--dr-blue); }
.md-status-card.green .md-status-ic { background: rgba(61,220,132,0.16); color: #2fae66; }
.md-status-label { font-size: 11px; font-weight: 800; letter-spacing: 0.3px; color: var(--dr-ink-soft); }
.md-status-info { width: 15px; height: 15px; color: var(--dr-ink-soft); flex-shrink: 0; margin-top: 2px; }
.md-status-value { font-size: 26px; font-weight: 800; margin: 2px 0 2px; }
.md-status-card.purple .md-status-value { color: var(--dr-purple); }
.md-status-card.blue .md-status-value { color: var(--dr-blue); }
.md-status-card.green .md-status-value { color: #2fae66; }
.md-status-desc { font-size: 11.5px; color: var(--dr-ink-soft); margin: 2px 0 12px; }
.md-status-bar { height: 6px; border-radius: 4px; background: var(--dr-bg-soft); overflow: hidden; }
.md-status-bar-fill { height: 100%; border-radius: 4px; }
.md-status-card.purple .md-status-bar-fill { background: var(--dr-purple); }
.md-status-card.blue .md-status-bar-fill { background: var(--dr-blue); }
.md-status-card.green .md-status-bar-fill { background: #2fae66; }

/* ---- Roadmap ---- */
.md-roadmap { display: flex; align-items: flex-start; overflow-x: auto; padding: 6px 2px 4px; }
.md-road-step { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 116px; flex-shrink: 0; text-align: center; cursor: pointer; border-radius: 12px; padding: 6px 4px; transition: background 0.15s; }
.md-road-step:hover, .md-road-step:focus-visible { background: var(--dr-bg-soft); outline: none; }
.md-road-arrow { width: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--dr-border); margin-top: 26px; }
.md-road-arrow svg { width: 15px; height: 15px; }

.md-road-edit-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,16,30,0.5);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.md-road-edit-box {
  background: var(--dr-panel); border-radius: 16px; padding: 18px;
  max-width: 340px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.md-road-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.md-road-edit-head span { font-size: 14px; font-weight: 800; color: var(--dr-ink); }
.md-road-edit-close {
  width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--dr-bg);
  color: var(--dr-ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.md-road-edit-close:hover { background: var(--dr-border); color: var(--dr-ink); }
.md-road-edit-close svg { width: 13px; height: 13px; }

.md-score-edit-body { text-align: center; padding: 10px 4px 4px; }
.md-score-edit-value { font-size: 32px; font-weight: 800; color: var(--dr-purple); margin-bottom: 16px; }
.md-score-edit-body input[type="range"] { width: 100%; accent-color: var(--dr-purple); cursor: pointer; }
.md-score-edit-note { font-size: 11.5px; color: var(--dr-ink-soft); margin-top: 14px; }

/* ---- 제작 요청 결제 모달 ---- */
.md-production-request-desc { font-size: 13px; color: var(--dr-ink); line-height: 1.55; margin-bottom: 14px; }
.md-production-request-detail-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--dr-ink-soft); margin-bottom: 6px; }
.md-production-request-detail {
  width: 100%; min-height: 72px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--dr-border); background: var(--dr-bg-soft); color: var(--dr-ink);
  font-size: 12.5px; font-family: inherit; resize: vertical; margin-bottom: 12px;
}
.md-production-request-detail:focus { outline: none; border-color: var(--dr-purple); }
.md-production-request-price {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 12px; background: var(--dr-active-bg); margin-bottom: 10px;
}
.md-production-request-price .lbl { font-size: 12px; font-weight: 700; color: var(--dr-ink-soft); }
.md-production-request-price .val { font-size: 17px; font-weight: 800; color: var(--dr-purple); }
.md-production-request-balance { font-size: 11.5px; color: var(--dr-ink-soft); margin-bottom: 14px; }
.md-production-request-pay {
  width: 100%; padding: 12px; border-radius: 12px; border: none; background: var(--dr-purple);
  color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.md-production-request-pay:disabled { background: var(--dr-bg-soft); color: var(--dr-ink-soft); cursor: not-allowed; }
.md-production-request-topup {
  display: block; text-align: center; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--dr-purple); text-decoration: none;
}
.md-production-request-topup:hover { text-decoration: underline; }

/* Slider popup must always paint above the DNA report overlay when opened
   from one of its tiles (both share .md-road-edit-overlay, so equal
   z-index would otherwise fall back to unreliable DOM order). */
#scoreEditOverlay { z-index: 210; }

.md-dna-report-box { max-width: 660px; }
.md-dna-report-body { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.md-dna-tiles { flex: 1 1 360px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.md-dna-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 10px; border-radius: 12px; border: 1px solid var(--dr-border); background: var(--dr-bg);
  font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s;
}
.md-dna-tile:hover, .md-dna-tile:focus-visible { border-color: var(--dr-purple); outline: none; }
.md-dna-tile-ic { width: 24px; height: 24px; color: var(--dr-purple); }
.md-dna-tile-ic svg { width: 100%; height: 100%; }
.md-dna-tile-num { font-size: 10px; font-weight: 800; color: var(--dr-ink-soft); }
.md-dna-tile-label { font-size: 10.5px; font-weight: 800; color: var(--dr-ink); letter-spacing: 0.2px; }
.md-dna-tile-value { font-size: 19px; font-weight: 800; color: var(--dr-purple); }
.md-dna-tile-tip { font-size: 10.5px; color: var(--dr-ink-soft); line-height: 1.4; }

.md-dna-score-panel { flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: 0 auto; }
.md-dna-score-ring {
  width: 128px; height: 128px; border-radius: 50%;
  background: conic-gradient(var(--dr-purple) calc(var(--p, 0) * 1%), var(--dr-bg-soft) 0);
  display: flex; align-items: center; justify-content: center;
}
.md-dna-score-ring-inner {
  width: 104px; height: 104px; border-radius: 50%; background: var(--dr-panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.md-dna-score-ring-inner .v { font-size: 24px; font-weight: 800; color: var(--dr-purple); }
.md-dna-score-ring-inner .t { font-size: 11px; font-weight: 700; color: var(--dr-ink-soft); margin-top: 2px; }
.md-dna-score-hint { font-size: 11px; color: var(--dr-ink-soft); line-height: 1.5; }

.md-road-ic-wrap { position: relative; width: 52px; height: 52px; }
.md-road-ic {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--dr-bg-soft);
  display: flex; align-items: center; justify-content: center;
}
.md-road-ic svg { width: 21px; height: 21px; color: var(--dr-ink-soft); }
.md-road-step.done .md-road-ic { background: #efeaff; }
.md-road-step.done .md-road-ic svg { color: var(--dr-purple); }

.md-road-ic-wrap.ring {
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(var(--dr-purple) calc(var(--p) * 1%), var(--dr-bg-soft) 0);
}
.md-road-ic-wrap.ring .md-road-ic { width: 100%; height: 100%; background: var(--dr-panel); }
.md-road-ic-wrap.ring .md-road-ic svg { color: var(--dr-purple); }

.md-road-check {
  position: absolute; bottom: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--dr-purple); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--dr-panel);
}
.md-road-check svg { width: 10px; height: 10px; }

.md-road-name { font-size: 12px; font-weight: 700; }
.md-road-status { font-size: 11px; color: var(--dr-ink-soft); }
.md-road-percent { font-size: 13px; font-weight: 800; color: var(--dr-purple); }
.md-road-step.done .md-road-status { color: var(--dr-purple); font-weight: 700; }

/* ---- 제작요청 / 자체제작 중 — shared by IP DNA 현황 tiles and roadmap steps ---- */
.md-production-row { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 2px; }
.md-dna-tile .md-production-row { align-items: flex-start; width: 100%; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--dr-border); }
.md-production-tag { font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.md-production-tag.self { background: var(--dr-bg-soft); color: var(--dr-ink-soft); }
.md-production-tag.requested { background: rgba(143,107,255,0.16); color: var(--dr-purple); }
.md-production-tag.done { background: rgba(62,207,125,0.16); color: #2fae6b; }
.md-production-btn {
  font-size: 9.5px; font-weight: 700; padding: 5px 9px; border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.md-production-btn.request { background: var(--dr-purple); color: #fff; }
.md-production-btn.cancel { background: var(--dr-bg-soft); color: var(--dr-ink-soft); }
.md-production-btn.cancel:hover { color: var(--dr-ink); }

/* ---- 전문가 검토 결과 read-only view (opened from a roadmap step's own
   action button now — see .md-road-action-btn below — not a separate badge). ---- */
.md-admin-review-body { display: flex; flex-direction: column; gap: 12px; }
.md-admin-review-submission { display: flex; flex-direction: column; gap: 12px; }
.md-admin-review-entry { display: flex; flex-direction: column; gap: 8px; }
.md-admin-review-entry + .md-admin-review-entry { padding-top: 12px; border-top: 1px dashed var(--dr-border); }
.md-admin-review-entry-label { font-size: 11.5px; font-weight: 800; color: var(--dr-purple); }
.md-admin-review-thumb {
  width: 100%; aspect-ratio: 16/9; border-radius: 10px; background-color: var(--dr-bg-soft);
  background-size: cover; background-position: center;
}
.md-admin-review-file {
  padding: 10px 12px; border-radius: 10px; background: var(--dr-bg-soft);
  font-size: 12px; font-weight: 700; color: var(--dr-ink);
}
.md-admin-review-note { font-size: 12px; color: var(--dr-ink-soft); line-height: 1.5; }
.md-admin-review-score { font-size: 13px; font-weight: 800; color: var(--dr-ink); }
.md-admin-review-score b { color: #2fae6b; }
.md-admin-review-flag { font-size: 10.5px; font-weight: 700; color: #d68a1c; background: rgba(214,138,28,0.14); padding: 3px 8px; border-radius: 999px; margin-left: 4px; }
.md-admin-review-comment {
  font-size: 12px; color: var(--dr-ink); line-height: 1.5; padding: 10px 12px;
  background: var(--dr-active-bg); border-radius: 10px;
}
.md-admin-review-waiting { font-size: 12px; color: var(--dr-ink-soft); }

/* ---- Unified per-step action button — one button, one status per roadmap
   step (미등록/작성 중/전문가 검토 중/보완 필요/준비 완료/제작 의뢰 중/제작 완료),
   replacing what used to be a self-progress badge + admin badge + 제작요청
   row shown all at once. ---- */
.md-road-action-btn {
  margin-top: 6px; padding: 6px 12px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 10.5px; font-weight: 700; font-family: inherit; white-space: nowrap;
  background: var(--dr-bg-soft); color: var(--dr-ink-soft);
}
.md-road-action-btn.unregistered { background: var(--dr-bg-soft); color: var(--dr-ink-soft); }
.md-road-action-btn.writing { background: rgba(79,176,255,0.16); color: var(--dr-blue); }
.md-road-action-btn.reviewing { background: rgba(143,107,255,0.16); color: var(--dr-purple); }
.md-road-action-btn.needs-revision { background: rgba(214,138,28,0.16); color: #d68a1c; }
.md-road-action-btn.ready { background: var(--dr-purple); color: #fff; }
.md-road-action-btn.production { background: rgba(143,107,255,0.16); color: var(--dr-purple); }
.md-road-action-btn.done { background: rgba(62,207,125,0.16); color: #2fae6b; }
.md-road-step.needs-revision .md-road-status { color: #d68a1c; font-weight: 700; }
.md-road-step.ready .md-road-status,
.md-road-step.done .md-road-status { color: var(--dr-purple); font-weight: 700; }

/* ---- 전문가 검토 요청 button — roadmap section header ---- */
.md-expert-review-btn {
  margin-left: auto; padding: 7px 14px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 12px; font-weight: 700; font-family: inherit; background: var(--dr-purple); color: #fff;
}
.md-expert-review-btn:hover { opacity: 0.9; }

/* ---- 개발 항목 자료 등록/수정 modal (openStepMaterialEditor) — a step can
   hold several registered entries (e.g. 시나리오의 1화/2화), so the modal
   body is a scrollable list of entries plus an "+ 자료 추가" row. ---- */
.md-step-material-body { display: flex; flex-direction: column; gap: 12px; }
.md-step-material-target { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.md-step-material-target label { font-size: 12px; font-weight: 700; color: var(--dr-ink); }
.md-step-material-target input {
  width: 64px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--dr-border);
  background: var(--dr-bg-soft); font-size: 12.5px; color: var(--dr-ink); font-family: inherit; text-align: center;
}
.md-step-material-target input:focus { outline: none; border-color: var(--dr-purple); }
.md-step-material-target-hint { font-size: 10.5px; color: var(--dr-ink-soft); width: 100%; }
.md-step-material-entries { display: flex; flex-direction: column; gap: 12px; max-height: 52vh; overflow-y: auto; }
.md-step-material-empty { font-size: 12.5px; color: var(--dr-ink-soft); padding: 8px 2px; }
.md-step-material-entry {
  border: 1px dashed var(--dr-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.md-step-material-entry-head { display: flex; align-items: center; gap: 8px; }
.md-step-material-entry-label {
  flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--dr-border);
  background: var(--dr-panel); font-size: 12.5px; color: var(--dr-ink); font-family: inherit;
}
.md-step-material-entry-label:focus { outline: none; border-color: var(--dr-purple); }
.md-step-material-entry-remove {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--dr-border);
  background: var(--dr-panel); color: var(--dr-ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.md-step-material-entry-remove svg { width: 13px; height: 13px; }
.md-step-material-entry-remove:hover { border-color: #d64545; color: #d64545; }
.md-step-material-add {
  padding: 10px; border-radius: 10px; border: 1.5px dashed var(--dr-purple);
  background: transparent; color: var(--dr-purple); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.md-step-material-add:hover { background: var(--dr-active-bg); }
.md-step-material-upload {
  position: relative; border: 1.5px dashed var(--dr-border); border-radius: 12px;
  padding: 20px; text-align: center; cursor: pointer; color: var(--dr-ink-soft);
  background-size: cover; background-position: center; transition: border-color 0.15s;
}
.md-step-material-upload:hover { border-color: var(--dr-purple); }
.md-step-material-upload svg { width: 22px; height: 22px; margin-bottom: 6px; color: var(--dr-ink-soft); }
.md-step-material-upload .t { font-size: 12.5px; font-weight: 700; color: var(--dr-ink); }
.md-step-material-upload .d { font-size: 10.5px; margin-top: 3px; }
.md-step-material-upload.has-file {
  border-style: solid; border-color: var(--dr-purple); min-height: 100px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 12px;
}
.md-step-material-upload.has-file::before {
  content: ''; position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,16,30,0) 40%, rgba(20,16,30,0.72) 100%);
}
.md-step-material-upload.has-file svg { display: none; }
.md-step-material-upload.has-file .t, .md-step-material-upload.has-file .d { position: relative; z-index: 1; color: #fff; }
.md-step-material-upload.error { border-color: #d64545; }
.md-step-material-upload.error .d { color: #d64545; }
.md-step-material-note {
  width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--dr-border); background: var(--dr-bg-soft); color: var(--dr-ink);
  font-size: 12.5px; font-family: inherit; resize: vertical;
}
.md-step-material-note:focus { outline: none; border-color: var(--dr-purple); }
.md-step-material-save {
  padding: 12px; border-radius: 12px; border: none; background: var(--dr-purple);
  color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit;
}

/* ---- 작성 완성도 상세 (openWritingCompletenessView) ---- */
.md-wc-note { font-size: 12px; color: var(--dr-ink-soft); margin-bottom: 12px; }
.md-wc-list { display: flex; flex-direction: column; gap: 8px; }
.md-wc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 10px; background: var(--dr-bg-soft); font-size: 12.5px; color: var(--dr-ink);
}
.md-wc-label { flex: 1; min-width: 0; }
.md-wc-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.md-wc-count { font-size: 11px; color: var(--dr-ink-soft); }
.md-wc-flag { font-size: 10.5px; font-weight: 700; color: var(--dr-ink-soft); }
.md-wc-flag.done { color: #2fae6b; }

/* ---- 전문가 준비도 종합 코멘트 (admin-set, read only here) ---- */
.md-status-card.blue { cursor: default; }
.md-status-card.blue:hover { border-color: var(--dr-border); }
.md-status-overall-comment {
  margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: var(--dr-active-bg);
  font-size: 11.5px; color: var(--dr-ink); line-height: 1.5;
}

/* ---- 제작요청 현황 tab — history list ---- */
.md-production-list-empty { font-size: 12.5px; color: var(--dr-ink-soft); line-height: 1.6; padding: 20px 4px; text-align: center; }
.md-production-list-item {
  border: 1px solid var(--dr-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
}
.md-production-list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.md-production-list-label { font-size: 13.5px; font-weight: 700; color: var(--dr-ink); }
.md-production-list-status { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.md-production-list-status.pending { background: rgba(143,107,255,0.16); color: var(--dr-purple); }
.md-production-list-status.cancelled { background: var(--dr-bg-soft); color: var(--dr-ink-soft); }
.md-production-list-status.done { background: rgba(62,207,125,0.16); color: #2fae6b; }
.md-production-list-status.rejected { background: rgba(214,69,69,0.14); color: #d64545; }
.md-production-list-meta { display: flex; gap: 10px; font-size: 11px; color: var(--dr-ink-soft); margin-top: 6px; }
.md-production-list-detail { font-size: 12px; color: var(--dr-ink-soft); margin-top: 8px; line-height: 1.5; padding-top: 8px; border-top: 1px dashed var(--dr-border); }
.md-production-list-result { font-size: 12px; color: var(--dr-ink); margin-top: 8px; line-height: 1.5; padding: 10px 12px; border-radius: 10px; background: var(--dr-bg-soft); }
.md-production-list-result span { display: block; font-size: 10.5px; font-weight: 700; color: var(--dr-ink-soft); margin-bottom: 3px; }

/* ---- Needs ---- */
.md-needs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.md-need-card { border: 1px solid var(--dr-border); border-radius: 16px; padding: 16px; }
.md-need-top { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.md-need-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--dr-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.md-need-ic svg { width: 17px; height: 17px; color: var(--dr-purple); }
.md-need-title { font-size: 13.5px; font-weight: 800; margin-bottom: 3px; }
.md-need-desc { font-size: 11.5px; color: var(--dr-ink-soft); line-height: 1.5; }
.md-need-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.md-pill-btn {
  font-size: 10.5px; font-weight: 700; padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--dr-border); background: var(--dr-bg); cursor: pointer; color: var(--dr-ink);
}
.md-pill-btn.ai { background: rgba(143,107,255,0.16); border-color: transparent; color: var(--dr-purple); }
.md-pill-btn.creator { background: rgba(217,121,31,0.18); border-color: transparent; color: #e0954a; }
.md-pill-btn.active { background: var(--dr-purple); border-color: transparent; color: #fff; }

/* Asset filter chips */
.md-asset-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

/* User-created folders — a second, free-form way to group assets on top of
   the fixed 캐릭터/세계관/스토리/아트워크 type filter above. No folders are
   pre-provided; the row only ever shows "전체 자산" until the user makes one. */
.md-asset-folder-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.md-folder-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; padding: 7px 8px 7px 13px; border-radius: 999px;
  border: 1px solid var(--dr-border); background: var(--dr-panel); color: var(--dr-ink-soft); cursor: pointer;
}
.md-folder-chip.active { background: var(--dr-purple); border-color: transparent; color: #fff; }
.md-folder-remove {
  width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; opacity: 0.7;
}
.md-folder-remove:hover { opacity: 1; background: rgba(0,0,0,0.15); }
.md-folder-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px;
  border: 1.5px dashed var(--dr-border); background: none; color: var(--dr-ink-soft); cursor: pointer;
}
.md-folder-add-btn:hover { border-color: var(--dr-purple); color: var(--dr-purple); }
.md-folder-add-btn svg { width: 11px; height: 11px; }
.md-folder-add-form { display: inline-flex; align-items: center; gap: 6px; }
.md-folder-add-form input {
  width: 130px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--dr-border);
  background: var(--dr-panel); font-size: 11.5px; color: var(--dr-ink); outline: none; font-family: inherit;
}
.md-folder-add-form input:focus { border-color: var(--dr-purple); }
.md-folder-add-form button {
  font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: none; cursor: pointer; font-family: inherit;
}
#folderAddConfirm { background: var(--dr-purple); color: #fff; }
#folderAddCancel { background: var(--dr-bg); color: var(--dr-ink-soft); }
.md-asset-folder-select {
  width: 100%; margin-top: 6px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--dr-border);
  background: var(--dr-panel); font-size: 10px; color: var(--dr-ink-soft); outline: none; font-family: inherit; cursor: pointer;
}
.md-asset-folder-select:focus { border-color: var(--dr-purple); }

/* ---- Assets ---- */
.md-assets-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.md-assets-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.md-asset-card { position: relative; border: 1px solid var(--dr-border); border-radius: 14px; padding: 10px; cursor: pointer; }
.md-asset-card:focus-visible { outline: 2px solid var(--dr-purple); outline-offset: 2px; }
.md-asset-delete {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s, background 0.15s; cursor: pointer;
}
.md-asset-delete svg { width: 12px; height: 12px; }
.md-asset-card:hover .md-asset-delete { opacity: 1; }
.md-asset-delete:hover { background: #e5484d; }
.md-asset-delete:focus-visible { opacity: 1; outline: 2px solid var(--dr-purple); outline-offset: 1px; }
.md-asset-thumb {
  aspect-ratio: 1 / 1; border-radius: 10px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
}
.md-asset-thumb svg { width: 26px; height: 26px; }
.md-asset-name { font-size: 12px; font-weight: 700; }
.md-asset-meta { font-size: 10.5px; color: var(--dr-ink-soft); margin-top: 2px; }
.md-asset-add {
  border: 1.5px dashed var(--dr-border); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--dr-ink-soft); font-size: 12px; font-weight: 700; cursor: pointer;
  background: none; width: 100%; height: 100%; min-height: 108px;
}
.md-asset-add svg { width: 20px; height: 20px; }
.md-asset-add:focus-visible { outline: 2px solid var(--dr-purple); outline-offset: 2px; }
.md-asset-add-form { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0 10px; }
.md-asset-add-form input {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--dr-border);
  background: var(--dr-panel); font-size: 11.5px; color: var(--dr-ink); outline: none; font-family: inherit; cursor: text;
}
.md-asset-add-form input:focus { border-color: var(--dr-purple); }
.md-asset-add-form .row { display: flex; gap: 6px; }
.md-asset-add-form button {
  flex: 1; padding: 7px; border-radius: 8px; border: none; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.md-asset-add-form .confirm { background: var(--dr-purple); color: #fff; }
.md-asset-add-form .confirm:disabled { opacity: 0.6; cursor: default; }
.md-asset-add-form select {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--dr-border);
  background: var(--dr-panel); font-size: 11.5px; color: var(--dr-ink); outline: none; font-family: inherit; cursor: pointer;
}
.md-asset-add-form select:focus { border-color: var(--dr-purple); }
.md-asset-file-label {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px;
  border: 1px dashed var(--dr-border); background: var(--dr-panel); font-size: 11px; color: var(--dr-ink-soft);
  cursor: pointer; font-weight: 600;
}
.md-asset-file-label:hover { border-color: var(--dr-purple); color: var(--dr-ink); }
.md-asset-file-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.md-asset-file-label .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-asset-file-label.has-file { border-style: solid; border-color: var(--dr-purple); color: var(--dr-ink); }
.md-asset-thumb.has-image { background-size: cover; background-position: center; }

.md-asset-preview-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,16,30,0.6);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.md-asset-preview-box {
  background: var(--dr-panel); border-radius: 16px; padding: 18px;
  max-width: 720px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.md-asset-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.md-asset-preview-head span { font-size: 14px; font-weight: 800; color: var(--dr-ink); }
.md-asset-preview-close {
  width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--dr-bg);
  color: var(--dr-ink-soft); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.md-asset-preview-close:hover { background: var(--dr-border); color: var(--dr-ink); }
.md-asset-preview-close svg { width: 14px; height: 14px; }
.md-asset-preview-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: auto; border-radius: 10px; background: var(--dr-bg); padding: 10px;
}
.md-asset-preview-body img { max-width: 100%; max-height: 60vh; border-radius: 8px; object-fit: contain; }
.md-asset-preview-body video { max-width: 100%; max-height: 60vh; border-radius: 8px; }
.md-asset-preview-pdf { width: 100%; height: 60vh; border: none; border-radius: 8px; }
.md-asset-preview-loading, .md-asset-preview-empty { padding: 30px 20px; font-size: 12.5px; color: var(--dr-ink-soft); text-align: center; }
.md-asset-preview-meta { font-size: 11px; color: var(--dr-ink-soft); text-align: center; }
.md-asset-preview-download {
  display: inline-block; margin-top: 4px; padding: 8px 16px; border-radius: 999px;
  background: var(--dr-purple); color: #fff; font-size: 11.5px; font-weight: 700; text-decoration: none;
}
@media (max-width: 640px) {
  .md-asset-preview-box { max-width: 100%; }
}
.md-asset-add-form .cancel { background: var(--dr-bg); color: var(--dr-ink-soft); }
.md-assets-empty {
  grid-column: 1 / -1;
  font-size: 12.5px; color: var(--dr-ink-soft);
  padding: 14px 2px;
}

/* ---- Right sidebar ---- */
.md-guide-card { text-align: center; }
.md-guide-title { font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.md-guide-bear { width: 100%; max-width: 190px; margin: 0 auto 14px; display: block; }
.md-guide-bubble {
  background: var(--dr-bg); border-radius: 14px; padding: 13px 14px;
  font-size: 12px; line-height: 1.65; color: var(--dr-ink); text-align: left;
}

.md-change-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border: 1px solid var(--dr-border); border-radius: 14px;
  margin-bottom: 8px; cursor: pointer;
}
.md-change-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--dr-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.md-change-ic svg { width: 16px; height: 16px; color: var(--dr-purple); }
.md-change-text { flex: 1; min-width: 0; }
.md-change-text .h { font-size: 12.5px; font-weight: 700; }
.md-change-text .s { font-size: 10.5px; color: var(--dr-ink-soft); margin-top: 1px; }
.md-change-row svg.chev { width: 14px; height: 14px; color: var(--dr-ink-soft); flex-shrink: 0; }
.md-more-btn {
  width: 100%; margin-top: 4px; padding: 11px; border-radius: 12px;
  border: 1px solid var(--dr-border); background: var(--dr-bg);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}

.md-tip-card {
  background: linear-gradient(160deg, rgba(143,107,255,0.16), rgba(143,107,255,0.05));
  border-radius: var(--dr-radius);
  padding: 18px;
}
.md-tip-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.md-tip-title svg { width: 15px; height: 15px; color: var(--dr-purple); }
.md-tip-text { font-size: 12px; line-height: 1.65; color: var(--dr-ink); }

/* ---- Discussion ---- */
.md-discuss-box { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.md-discuss-avatar-icon {
  width: 36px; height: 36px; border-radius: 50%; background: #6b5541; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.md-discuss-avatar-icon svg { width: 20px; height: 20px; }
.md-discuss-box input {
  flex: 1; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--dr-border);
  background: var(--dr-bg); font-size: 13px; color: var(--dr-ink); outline: none; font-family: inherit;
}
.md-discuss-box input:focus { border-color: var(--dr-purple); }
.md-discuss-box button {
  padding: 11px 18px; border-radius: 999px; border: none; background: var(--dr-purple);
  color: #fff; font-weight: 700; font-size: 12.5px; cursor: pointer; flex-shrink: 0;
}

.md-discuss-list { display: flex; flex-direction: column; gap: 18px; }
.md-discuss-item { display: flex; gap: 12px; }
.md-discuss-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.md-discuss-body { flex: 1; min-width: 0; }
.md-discuss-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.md-discuss-head .n { font-size: 13px; font-weight: 700; }
.md-discuss-head .r { font-size: 11px; color: var(--dr-purple); font-weight: 700; }
.md-discuss-head .d { font-size: 10.5px; color: var(--dr-ink-soft); }
.md-discuss-text { font-size: 12.5px; color: var(--dr-ink); line-height: 1.6; margin: 4px 0 6px; }
.md-discuss-meta { display: flex; gap: 14px; }
.md-discuss-meta button { font-size: 11px; font-weight: 700; color: var(--dr-ink-soft); background: none; border: none; cursor: pointer; padding: 0; }
.md-discuss-meta button:hover { color: var(--dr-ink); }
.md-discuss-meta .md-discuss-like.liked { color: var(--dr-purple); }
.md-discuss-empty { font-size: 12.5px; color: var(--dr-ink-soft); padding: 6px 2px; }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
  .md-layout { grid-template-columns: 1fr; }
  .md-col-side { flex-direction: row; flex-wrap: wrap; }
  .md-col-side > * { flex: 1 1 260px; }
}
@media (max-width: 760px) {
  .md-goals { grid-template-columns: repeat(2, 1fr); }
  .md-status-grid { grid-template-columns: 1fr; }
  .md-needs-grid { grid-template-columns: 1fr; }
  .md-assets-row { grid-template-columns: repeat(2, 1fr); }
  .md-dna-report-body { flex-direction: column; align-items: center; }
  .md-dna-tiles { grid-template-columns: repeat(2, 1fr); }
}