.app-shell { max-width: 430px; margin: 0 auto; }

    /* 추천 카드 — card-action 변형 */
    .rec-card {
      cursor: pointer;
    }
    .rec-card__head {
      display: flex; align-items: center; gap: var(--space-3);
      margin-bottom: var(--space-3);
    }
    .rec-card__icon {
      width: 28px; height: 28px; border-radius: 10px;
      background: var(--color-accent-soft);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .rec-card__icon img { width: 16px; height: 16px; }
    .rec-card__eyebrow {
      font-size: var(--text-mini); font-weight: var(--weight-bold);
      color: var(--color-accent);
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .rec-card__title {
      font-size: var(--text-headline); font-weight: var(--weight-bold);
      line-height: var(--leading-tight);
      margin-bottom: var(--space-3);
    }
    .rec-card__desc {
      font-size: var(--text-callout); color: var(--color-text-secondary);
      line-height: var(--leading-normal);
    }
    .rec-card__more {
      display: inline-flex; align-items: center; gap: var(--space-2);
      margin-top: var(--space-4);
      font-size: var(--text-callout); font-weight: var(--weight-semibold);
      color: var(--color-accent);
    }

    /* 섹션 헤더 */
    .sec-head {
      display: flex; align-items: baseline; justify-content: space-between;
      margin-bottom: var(--space-3);
    }
    .sec-head__title {
      font-size: var(--text-headline); font-weight: var(--weight-bold);
    }
    .sec-head__more {
      font-size: var(--text-caption); font-weight: var(--weight-semibold);
      color: var(--color-accent);
      cursor: pointer; background: 0; border: 0;
    }

    .sec-note {
      font-size: var(--text-caption); line-height: 1.5;
      color: var(--color-text-tertiary);
      margin-bottom: var(--space-3);
    }

    /* 카테고리 칩 row */
    .cat-row {
      display: flex; gap: var(--space-2);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-right: var(--space-7);
    }
    .cat-row::-webkit-scrollbar { display: none; }
    .cat-row .chip { flex-shrink: 0; }

    /* 질문 리스트 */
    .q-list { display: flex; flex-direction: column; gap: var(--space-3); }
    .q-item {
      background: var(--color-bg-surface);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-1);
      overflow: hidden;
      cursor: pointer;
    }
    .q-item__row {
      display: flex; align-items: center; gap: var(--space-3);
      padding: var(--space-4) var(--space-5);
    }
    .q-item__badge {
      width: 24px; height: 24px; border-radius: var(--radius-pill);
      background: var(--color-accent-soft);
      color: var(--color-accent);
      display: flex; align-items: center; justify-content: center;
      font-size: var(--text-caption); font-weight: var(--weight-bold);
      flex-shrink: 0;
    }
    .q-item__text {
      flex: 1;
      font-size: var(--text-callout); font-weight: var(--weight-semibold);
    }
    .q-item__arrow {
      color: var(--color-text-tertiary);
      transition: transform var(--motion-transition) var(--easing-standard);
    }
    .q-item.is-open .q-item__arrow { transform: rotate(90deg); }
    .q-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--motion-transition) var(--easing-standard);
    }
    .q-answer__inner {
      padding: 0 var(--space-5) var(--space-5);
      display: flex; gap: var(--space-3); align-items: flex-start;
      border-top: 1px solid var(--color-border-subtle);
      padding-top: var(--space-4);
      flex-direction: column;
    }
    .q-answer__row { display: flex; gap: var(--space-3); align-items: flex-start; }
    .q-answer__a {
      width: 24px; height: 24px; border-radius: var(--radius-pill);
      background: var(--color-success-soft);
      color: var(--color-success);
      display: flex; align-items: center; justify-content: center;
      font-size: var(--text-caption); font-weight: var(--weight-bold);
      flex-shrink: 0;
    }
    .q-answer__text {
      font-size: var(--text-callout);
      color: var(--color-text-secondary);
      line-height: var(--leading-relaxed);
    }

    /* 케어 지식 — 카드 */
    .article-list { display: flex; flex-direction: column; gap: var(--space-3); }
    .article-card {
      display: flex; gap: var(--space-4);
      align-items: stretch;
      cursor: pointer;
    }
    .article-card__body { flex: 1; min-width: 0; }
    .article-card__tag {
      display: inline-flex;
      font-size: var(--text-mini); font-weight: var(--weight-bold);
      padding: 3px 8px; border-radius: var(--radius-pill);
      background: var(--color-accent-soft); color: var(--color-accent);
      margin-bottom: var(--space-2);
    }
    .article-card__title {
      font-size: var(--text-callout); font-weight: var(--weight-bold);
      line-height: var(--leading-normal);
      margin-bottom: var(--space-2);
    }
    .article-card__desc {
      font-size: var(--text-mini);
      color: var(--color-text-secondary);
      line-height: var(--leading-normal);
      word-break: keep-all;
      overflow-wrap: anywhere;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .article-card__thumb {
      width: 80px; height: 80px;
      border-radius: var(--radius-card);
      overflow: hidden;
      flex-shrink: 0;
      background: var(--color-bg-canvas);
    }
    .article-card__thumb img { width: 100%; height: 100%; object-fit: cover; }