* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-white: #ffffff;
  --text-black: #333333;
  --text-gray: #999999;
  --border-color: #eeeeee;
  --page-safe-top: 56px;
  --week-row-height: 55px;
  --week-row-count: 11;
  --card-purple-bg: #f4f2ff;
  --card-purple-border: #c4bef7;
  --card-purple-text: #6a5bca;
  --card-blue-bg: #f2f6fe;
  --card-blue-text: #527ecc;
  --card-green-bg: #f0f8f4;
  --card-green-text: #5c9b71;
  --card-pink-bg: #fff0f5;
  --card-pink-text: #d07090;
  --card-orange-bg: #fff4e8;
  --card-orange-text: #db8f37;
  --card-muted-bg: #f5f5f5;
  --card-muted-text: #aaaaaa;
  --card-cyan-bg: #eefaf8;
  --card-cyan-text: #53b3c6;
}

html,
body {
  width: 100%;
  min-height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top, rgba(110, 164, 248, 0.16), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
}

body {
  min-height: 100vh;
}

button {
  font: inherit;
}

.prototype-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.phone-shell {
  position: relative;
  width: 390px;
  height: 844px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 8px solid #111111;
  border-radius: 38px;
  background: var(--bg-white);
  box-shadow: 0 28px 70px rgba(39, 62, 102, 0.2);
}

.status-bar {
  position: absolute;
  top: 10px;
  right: 20px;
  left: 20px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #111111;
  pointer-events: none;
}

.status-bar-time {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.status-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.status-signal span {
  width: 3px;
  border-radius: 999px;
  background: #111111;
}

.status-signal span:nth-child(1) {
  height: 5px;
}

.status-signal span:nth-child(2) {
  height: 8px;
}

.status-signal span:nth-child(3) {
  height: 11px;
}

.status-signal span:nth-child(4) {
  height: 14px;
}

.status-network {
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

.status-battery {
  position: relative;
  min-width: 28px;
  height: 16px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #32d74b;
  color: #ffffff;
}

.status-battery::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 2px;
  height: 6px;
  border-radius: 0 2px 2px 0;
  background: rgba(17, 17, 17, 0.28);
  transform: translateY(-50%);
}

.status-battery-level {
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.dynamic-island {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 148px;
  height: 34px;
  border-radius: 999px;
  background: #111111;
  transform: translateX(-50%);
  z-index: 3;
}

.schedule-header {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding: 68px 18px 12px;
  background: var(--bg-white);
  border-bottom: 1px solid #f5f5f5;
}

.schedule-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.toolbar-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.menu-button {
  width: 26px;
  height: 26px;
  margin-top: 3px;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.menu-button span {
  display: block;
  height: 2.2px;
  border-radius: 999px;
  background: #4a4a4a;
}

.menu-button span:nth-child(1) {
  width: 100%;
}

.menu-button span:nth-child(2) {
  width: 78%;
}

.menu-button span:nth-child(3) {
  width: 62%;
}

.week-meta {
  min-width: 0;
}

.week-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.week-title {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-black);
}

.week-caret {
  font-size: 11px;
  line-height: 1;
  color: #4a4a4a;
}

.week-subtitle {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--text-gray);
}

.view-switch-button,
.icon-button,
.add-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.view-switch-button {
  min-width: 52px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  background: #fafafa;
  color: #4a4a4a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.icon-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  background: #fafafa;
  color: #4a4a4a;
}

.icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.add-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(180deg, #9d77ff 0%, #569cff 100%);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(86, 156, 255, 0.22);
}

.calendar-strip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
}

.calendar-month {
  width: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 4px;
  color: var(--text-gray);
  font-size: 12px;
  line-height: 1.15;
}

.calendar-days {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.calendar-day {
  flex: 1;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.weekday {
  font-size: 16px;
  line-height: 1.2;
  color: var(--text-black);
}

.date {
  font-size: 16px;
  line-height: 1.2;
  color: #a7a7a7;
}

.calendar-day.is-active .date {
  padding: 2px 6px;
  border-radius: 8px;
  background: #222222;
  color: #ffffff;
}

.app-main {
  flex: 1;
  overflow: hidden;
  overflow-x: hidden;
  background: var(--bg-white);
}

.app-main::-webkit-scrollbar {
  display: none;
}

.app-page {
  display: none;
  height: 100%;
}

.app-page-course {
  display: block;
  overflow-y: auto;
  background: #ffffff;
}

.app-page-course::-webkit-scrollbar {
  display: none;
}

.app-page-scroll {
  overflow-y: auto;
}

.app-page-scroll::-webkit-scrollbar {
  display: none;
}

.app-page-growth {
  background: #f8f9fb;
}

.app-page-ai {
  position: relative;
  background: #f7f8fa;
}

.app-page-my {
  background: #ffffff;
}

.bottom-nav {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 10px 10px;
  flex-shrink: 0;
  border-top: 1px solid #f0f0f0;
  background: #ffffff;
}

.bottom-tab {
  min-width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #999999;
  cursor: pointer;
}

.bottom-tab.is-active {
  color: #007aff;
}

.bottom-tab-icon {
  font-size: 18px;
  line-height: 1;
}

.bottom-tab-label {
  font-size: 11px;
  line-height: 1;
}

.schedule-header[hidden] {
  display: none;
}

.view-panel {
  width: 100%;
  min-height: 100%;
}

#day-view {
  padding-bottom: 20px;
}

.day-heading {
  padding: 14px 18px 10px;
}

.day-title {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text-black);
}

.day-subtitle {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--text-gray);
}

.day-timeline {
  padding: 4px 14px 0;
}

.day-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
}

.day-row + .day-row {
  margin-top: 12px;
}

.day-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.day-time-text {
  font-size: 10px;
  line-height: 1.2;
  color: #c0c0c0;
}

.day-time-divider {
  width: 1px;
  min-height: 34px;
  margin: 6px 0;
  background: #ededed;
}

.day-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.parallel-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.parallel-row .day-card {
  flex: 1;
  min-width: 0;
}

.day-card {
  min-height: 92px;
  border-radius: 8px;
  padding: 12px 12px 12px 14px;
  box-shadow: 0 8px 20px rgba(20, 20, 20, 0.04);
}

.day-card-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.day-card-copy {
  flex: 1;
  min-width: 0;
}

.day-card-title {
  font-size: 15px;
  line-height: 1.32;
  font-weight: 700;
}

.day-card-location {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.3;
}

.day-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

.day-card.is-compact {
  min-height: 92px;
  padding: 10px 10px 10px 12px;
}

.day-card.is-compact .day-card-title {
  font-size: 11px;
  line-height: 1.35;
}

.day-card.is-compact .day-card-location,
.day-card.is-compact .day-card-meta {
  font-size: 11px;
  line-height: 1.3;
}

.day-card.is-compact .day-card-location {
  margin-top: 12px;
}

.day-card.is-compact .day-card-meta {
  gap: 8px;
  white-space: normal;
  text-align: right;
}

.course-card.is-purple {
  background: var(--card-purple-bg);
  box-shadow:
    inset 4px 0 0 var(--card-purple-border),
    0 8px 20px rgba(20, 20, 20, 0.04);
}

.course-card.is-purple .day-card-title,
.course-card.is-purple .day-card-location,
.course-card.is-purple .day-card-meta {
  color: var(--card-purple-text);
}

.course-card.is-green {
  background: var(--card-green-bg);
  box-shadow:
    inset 4px 0 0 #9ad5ae,
    0 8px 20px rgba(20, 20, 20, 0.04);
}

.course-card.is-green .day-card-title,
.course-card.is-green .day-card-location,
.course-card.is-green .day-card-meta {
  color: var(--card-green-text);
}

.course-card.is-blue {
  background: var(--card-blue-bg);
  box-shadow:
    inset 4px 0 0 #8eb4eb,
    0 8px 20px rgba(20, 20, 20, 0.04);
}

.course-card.is-blue .day-card-title,
.course-card.is-blue .day-card-location,
.course-card.is-blue .day-card-meta {
  color: var(--card-blue-text);
}

.course-card.is-pink {
  background: var(--card-pink-bg);
  box-shadow:
    inset 4px 0 0 #eeadc2,
    0 8px 20px rgba(20, 20, 20, 0.04);
}

.course-card.is-pink .day-card-title,
.course-card.is-pink .day-card-location,
.course-card.is-pink .day-card-meta {
  color: var(--card-pink-text);
}

.course-card.is-orange {
  background: var(--card-orange-bg);
  box-shadow:
    inset 4px 0 0 #f4be85,
    0 8px 20px rgba(20, 20, 20, 0.04);
}

.course-card.is-orange .day-card-title,
.course-card.is-orange .day-card-location,
.course-card.is-orange .day-card-meta {
  color: var(--card-orange-text);
}

.course-card.is-muted {
  background: var(--card-muted-bg);
  box-shadow:
    inset 4px 0 0 #d9d9d9,
    0 8px 20px rgba(20, 20, 20, 0.04);
}

.course-card.is-muted .day-card-title,
.course-card.is-muted .day-card-location,
.course-card.is-muted .day-card-meta {
  color: var(--card-muted-text);
}

.ai-card {
  position: relative;
  min-height: 92px;
  border: 2px dashed #b8a8f8;
  border-radius: 8px;
  padding: 10px;
  background: #fcfaff;
  box-shadow: 0 8px 20px rgba(107, 66, 246, 0.06);
}

.ai-card-content {
  padding-right: 62px;
}

.ai-card-title {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  color: #6b42f6;
}

.ai-card-text {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #6b42f6;
}

.ai-adopt-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  border-radius: 12px;
  background: #6b42f6;
  color: #ffffff;
  padding: 2px 8px;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
}

.personal-card {
  background: #f5f5f5;
  box-shadow:
    inset 4px 0 0 #cccccc,
    0 8px 20px rgba(20, 20, 20, 0.03);
}

.personal-card .day-card-title,
.personal-card .day-card-location,
.personal-card .day-card-meta {
  color: #666666;
}

.day-empty {
  margin: 12px 14px 0;
  padding: 16px 12px;
  border: 1px dashed #ebebeb;
  border-radius: 14px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-gray);
}

#week-view {
  padding: 10px 8px 20px 6px;
}

.week-grid {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
}

.period-column {
  display: grid;
  grid-template-rows: repeat(var(--week-row-count), var(--week-row-height));
}

.period-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2px;
  border-bottom: 1px dashed #f0f0f0;
}

.period-index {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  color: #333333;
}

.period-time {
  font-size: 9px;
  line-height: 1.2;
  color: #aaaaaa;
}

.week-columns {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  min-height: calc(var(--week-row-count) * var(--week-row-height));
}

.week-guide-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.week-guide-line {
  position: absolute;
  right: 0;
  left: 0;
  top: calc(var(--line-index) * var(--week-row-height) - 1px);
  border-bottom: 1px dashed #f0f0f0;
}

.week-column {
  position: relative;
  min-height: calc(var(--week-row-count) * var(--week-row-height));
  border-radius: 10px;
}

.week-column.is-selected {
  background: transparent;
}

.week-course {
  position: absolute;
  left: 50%;
  width: 92%;
  margin: 2px auto;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  text-align: center;
  transform: translateX(-50%);
  top: calc((var(--row-start) - 1) * var(--week-row-height) + 2px);
  height: calc(var(--row-span) * var(--week-row-height) - 6px);
  overflow: hidden;
}

.course-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 500;
  overflow: hidden;
}

.course-name {
  width: 100%;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.course-location {
  width: 100%;
  flex-shrink: 0;
}

.course-badge {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px 6px 0 0;
  background: #e0e0e0;
  color: #ffffff;
  font-size: 8px;
  line-height: 1;
}

.week-course.is-purple {
  background: var(--card-purple-bg);
}

.week-course.is-purple .course-text {
  color: var(--card-purple-text);
}

.week-course.is-blue {
  background: var(--card-blue-bg);
}

.week-course.is-blue .course-text {
  color: var(--card-blue-text);
}

.week-course.is-green {
  background: var(--card-green-bg);
}

.week-course.is-green .course-text {
  color: var(--card-green-text);
}

.week-course.is-pink {
  background: var(--card-pink-bg);
}

.week-course.is-pink .course-text {
  color: var(--card-pink-text);
}

.week-course.is-orange {
  background: var(--card-orange-bg);
}

.week-course.is-orange .course-text {
  color: var(--card-orange-text);
}

.week-course.is-cyan {
  background: var(--card-cyan-bg);
}

.week-course.is-cyan .course-text {
  color: var(--card-cyan-text);
}

.week-course.is-muted {
  padding-top: 14px;
  background: var(--card-muted-bg);
}

.week-course.is-muted .course-text {
  color: var(--card-muted-text);
}

.week-course.is-mini {
  width: 78%;
  height: 24px;
  padding: 0;
  background: transparent;
  overflow: visible;
}

.week-course.is-mini .course-badge {
  position: static;
  width: 100%;
  height: 24px;
  border-radius: 8px;
}

.week-course.is-mini .course-text {
  display: none;
}

.growth-page {
  position: relative;
  min-height: 100%;
  padding: var(--page-safe-top) 0 28px;
  background: #f8f9fb;
}

.growth-hero {
  padding: 16px 15px 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.growth-hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.growth-hero-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.growth-hero-title {
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
  color: #111111;
}

.growth-hero-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #4b7cff;
  box-shadow: 0 0 0 6px rgba(75, 124, 255, 0.12);
}

.growth-hero-subtitle {
  font-size: 11px;
  line-height: 1.25;
  color: #999999;
}

.growth-hero-action {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #edf5ff 0%, #dfefff 100%);
  color: #4b7cff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(75, 124, 255, 0.14);
  cursor: pointer;
}

.growth-hero-action-icon {
  font-size: 14px;
  line-height: 1;
}

.growth-hero-action-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4f;
  border: 2px solid #f8f9fb;
}

.growth-search-bar {
  width: calc(100% - 30px);
  margin: 0 15px 14px;
  padding: 0 13px;
  height: 36px;
  border: 0;
  border-radius: 18px;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  color: #bdbdbd;
  text-align: left;
  background-clip: padding-box;
}

.growth-search-icon {
  font-size: 12px;
  line-height: 1;
}

.growth-search-input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.2;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333333;
}

.growth-search-input::placeholder {
  color: #bdbdbd;
}

.growth-section-title {
  margin: 0 15px 10px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  color: #111111;
}

.growth-recommend-strip,
.growth-filter-strip {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.growth-recommend-strip::-webkit-scrollbar,
.growth-filter-strip::-webkit-scrollbar {
  display: none;
}

.growth-recommend-strip {
  gap: 12px;
  padding: 0 15px 16px;
  background: #f8f9fb;
}

.growth-feature-card {
  position: relative;
  flex-shrink: 0;
  width: 240px;
  min-height: 120px;
  padding: 12px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 30px rgba(74, 46, 150, 0.18);
  white-space: normal;
}

.growth-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 55%);
  pointer-events: none;
}

.growth-feature-card.is-purple {
  background: linear-gradient(135deg, #6b42f6, #9b63f8);
}

.growth-feature-card.is-green {
  background: linear-gradient(135deg, #20b26a, #4ade80);
  box-shadow: 0 16px 30px rgba(33, 166, 101, 0.2);
}

.growth-feature-card.is-orange {
  background: linear-gradient(135deg, #ff8c42, #ffb86b);
  box-shadow: 0 16px 30px rgba(255, 140, 66, 0.22);
}

.growth-feature-head,
.growth-feature-body {
  position: relative;
  z-index: 1;
}

.growth-feature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.growth-feature-match {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 9px;
  line-height: 1;
  backdrop-filter: blur(6px);
}

.growth-feature-medal {
  font-size: 16px;
  line-height: 1;
}

.growth-feature-body {
  margin-top: 10px;
  min-height: 48px;
  white-space: normal;
}

.growth-feature-title {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  color: #ffffff;
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.growth-feature-description {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.76);
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.growth-feature-cta {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: 100%;
  height: 28px;
  border: 0;
  border-radius: 14px;
  background: #ffffff;
  color: #6b42f6;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.growth-feature-card.is-green .growth-feature-cta {
  color: #1f9a62;
}

.growth-filter-area {
  position: relative;
  z-index: 101;
  margin-bottom: 12px;
}

.tab-bar-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  padding: 0 0 15px 15px;
  box-sizing: border-box;
}

.tab-scroll-area {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tab-scroll-area::-webkit-scrollbar {
  display: none;
}

.tab-spacer {
  display: inline-block;
  width: 10px;
  flex-shrink: 0;
}

.filter-btn-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 15px 0 10px;
  background: #f8f9fb;
  position: relative;
  z-index: 10;
}

.filter-btn-wrapper::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(to right, rgba(248,249,251,0), #F8F9FB);
  pointer-events: none;
}

.filter-btn {
  font-size: 13px;
  color: #666;
  cursor: pointer;
  padding: 6px 0;
}

.growth-filter-pill {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 14px;
  border: 1px solid #eaeaea;
  background: #ffffff;
  color: #666666;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.growth-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: fit-content;
  padding: 5px 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #eaeaea;
  color: #666666;
  font-size: 12px;
  line-height: 1.2;
  transition: all 0.2s;
  cursor: pointer;
  white-space: nowrap;
}

.active-tab {
  border-color: transparent;
  background: #222222;
  color: #ffffff;
}

.growth-feed {
  margin: 0 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8f9fb;
}

.growth-detail-card {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.growth-detail-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.growth-detail-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

.growth-detail-icon.is-blue {
  background: linear-gradient(135deg, #eaf2ff 0%, #dce9ff 100%);
  color: #4779f6;
}

.growth-detail-icon.is-purple {
  background: linear-gradient(135deg, #f1e7ff 0%, #eadbff 100%);
  color: #7b42f6;
}

.growth-detail-icon.is-cyan {
  background: linear-gradient(135deg, #e8fbff 0%, #d6f5fb 100%);
  color: #1aa4c7;
}

.growth-detail-icon.is-orange {
  background: linear-gradient(135deg, #fff1e2 0%, #ffe5c4 100%);
  color: #e38a2d;
}

.growth-detail-icon.is-indigo {
  background: linear-gradient(135deg, #edf1ff 0%, #dfe5ff 100%);
  color: #5668ff;
}

.growth-detail-status {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.growth-detail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.growth-detail-badge.is-hot {
  background: linear-gradient(135deg, #ff9d4d 0%, #ff7a18 100%);
  color: #ffffff;
}

.growth-detail-badge.is-forecast {
  background: #ecfff1;
  color: #20a65f;
}

.growth-detail-badge.is-cyan {
  background: #eafcff;
  color: #1aa4c7;
}

.growth-detail-badge.is-job {
  background: #fff2e6;
  color: #ea8b2d;
}

.growth-detail-badge.is-indigo {
  background: #eef0ff;
  color: #5668ff;
}

.growth-detail-countdown {
  font-size: 10px;
  line-height: 1.2;
  color: #888888;
}

.growth-detail-title {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  color: #222222;
}

.growth-detail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  line-height: 1.2;
  color: #888888;
}

.growth-detail-meta-icon {
  font-size: 16px;
  line-height: 1;
  color: #c0c4cf;
}

.growth-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.growth-detail-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.2;
}

.growth-detail-tag.is-muted {
  background: #f2f3f5;
  color: #8d9097;
}

.growth-detail-tag.is-purple {
  background: #f0e6ff;
  color: #7b42f6;
}

.growth-detail-tag.is-cyan {
  background: #e8fbff;
  color: #1aa4c7;
}

.growth-detail-tag.is-orange {
  background: #fff2e6;
  color: #ea8b2d;
}

.growth-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.growth-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 9px;
  line-height: 1.2;
  color: #888888;
}

.growth-progress-track {
  height: 4px;
  border-radius: 2px;
  background: #ededf1;
  overflow: hidden;
}

.growth-progress-fill {
  display: block;
  width: 60%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #6b42f6 0%, #9b63f8 100%);
}

.growth-progress-fill.is-orange {
  background: linear-gradient(90deg, #ff9d4d 0%, #ff7a18 100%);
}

.growth-detail-tip {
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: #f5f6f8;
  font-size: 10px;
  line-height: 1.35;
  color: #7f8592;
}

.growth-detail-actions {
  margin-top: 3px;
  display: flex;
  gap: 10px;
}

.growth-detail-button {
  flex: 1;
  height: 30px;
  border: 1px solid #e7e8ec;
  border-radius: 15px;
  background: #ffffff;
  color: #222222;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
}

.filter-mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

.filter-panel {
  display: none;
  position: absolute;
  top: calc(100% - 8px);
  left: 0;
  right: 0;
  padding: 15px;
  background: #ffffff;
  z-index: 100;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.filter-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.filter-row + .filter-row {
  margin-top: 12px;
}

.filter-row-title {
  width: 40px;
  flex-shrink: 0;
  padding-top: 1px;
  font-size: 12px;
  line-height: 1.2;
  color: #999999;
}

.filter-options {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.filter-option {
  border: 0;
  background: transparent;
  color: #222222;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.filter-opt-active {
  color: #007aff;
  font-weight: 700;
}

.filter-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.filter-action-btn {
  min-width: 68px;
  height: 30px;
  border: 1px solid #e7e8ec;
  border-radius: 15px;
  background: #ffffff;
  color: #333333;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.filter-action-btn.is-primary {
  border-color: #007aff;
  background: #007aff;
  color: #ffffff;
}

.growth-detail-button.is-primary {
  border-color: #6b42f6;
  background: #6b42f6;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(107, 66, 246, 0.2);
}

.growth-detail-button.is-outline {
  border-color: #6b42f6;
  background: #ffffff;
  color: #6b42f6;
}

.ai-page {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: var(--page-safe-top);
  background: #f7f8fa;
}

.ai-header {
  position: relative;
  flex-shrink: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.ai-logo {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #007aff;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  transform: translateY(-50%);
}

.ai-header-title {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: #333333;
}

.ai-chat-area {
  flex: 1;
  padding: 15px 15px 84px;
  overflow-y: auto;
  background: #f7f8fa;
}

.ai-chat-area::-webkit-scrollbar {
  display: none;
}

.ai-message-row {
  display: flex;
  margin-bottom: 14px;
}

.ai-message-row.is-user {
  justify-content: flex-end;
}

.ai-message-row.is-assistant {
  justify-content: flex-start;
}

.ai-message-bubble {
  max-width: 286px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.03);
}

.ai-message-bubble.is-user {
  border-radius: 16px 4px 16px 16px;
  background: #007aff;
  color: #ffffff;
}

.ai-message-bubble.is-assistant {
  border-radius: 4px 16px 16px 16px;
  background: #ffffff;
  color: #333333;
}

.ai-message-text {
  font-size: 13px;
  line-height: 1.45;
  color: #333333;
}

.ai-recommend-card {
  margin-top: 10px;
  padding: 12px;
  border-radius: 8px;
  background: #f4f2ff;
}

.ai-recommend-title {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  color: #333333;
}

.ai-recommend-subtitle {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #999999;
}

.ai-recommend-link {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #007aff;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.ai-input-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  padding: 10px 15px 12px;
  background: #ffffff;
  border-top: 1px solid #f0f0f0;
}

.ai-input-shell {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 15px;
  padding-right: 8px;
  border-radius: 18px;
  background: #f2f2f6;
}

.ai-input-placeholder {
  font-size: 13px;
  line-height: 1;
  color: #9a9a9a;
}

.ai-voice-button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #007aff;
  line-height: 1;
  cursor: pointer;
}

.ai-voice-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.my-page {
  min-height: 100%;
  padding-top: var(--page-safe-top);
  padding-bottom: 24px;
  background: #ffffff;
}

.my-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 30px 20px 20px;
}

.my-avatar {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #f4d1bf 0 18px, transparent 18px),
    radial-gradient(circle at 50% 78%, #d8b29f 0 24px, transparent 24px),
    linear-gradient(180deg, #5b5b63 0%, #2f2f35 100%);
  box-shadow: 0 6px 16px rgba(17, 17, 17, 0.08);
}

.my-profile-info {
  min-width: 0;
}

.my-name {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: #333333;
}

.my-verify-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e6f9f0;
  color: #00b359;
}

.my-verify-icon {
  font-size: 11px;
  line-height: 1;
}

.my-verify-text {
  font-size: 11px;
  line-height: 1.2;
}

.my-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 15px;
}

.my-stat-card {
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #f7f8fa;
}

.my-stat-value {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: #333333;
}

.my-stat-label {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #999999;
}

.my-section-title {
  margin: 25px 15px 15px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: #333333;
}

.my-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 8px;
  padding: 0 15px;
}

.my-tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.my-tool-thumb {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #d5dbe4 0%, #b8c2d1 100%);
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.04);
}

.tool-thumb-cat {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 58%),
    linear-gradient(135deg, #d8b18c 0%, #8c5a36 100%);
}

.tool-thumb-canteen {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 56%),
    linear-gradient(135deg, #efc272 0%, #b45e32 100%);
}

.tool-thumb-map {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 56%),
    linear-gradient(135deg, #8fd1b8 0%, #3d8f7e 100%);
}

.tool-thumb-room {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 56%),
    linear-gradient(135deg, #a7bfde 0%, #5b79b2 100%);
}

.my-tool-label {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.25;
  color: #333333;
  text-align: center;
}

.my-settings {
  margin-top: 20px;
}

.my-setting-item {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border: 0;
  border-bottom: 1px solid #f0f0f0;
  background: #ffffff;
  cursor: pointer;
}

.my-setting-text {
  font-size: 15px;
  line-height: 1.2;
  color: #000000;
}

.my-setting-arrow {
  font-size: 15px;
  line-height: 1;
  color: #c7c7cc;
}