/* I3 — S00 온보딩 · S01 메인 · S06/S07/S13 시트 · 캐릭터 호스트. mockup/mockup.css 2~4장을 hm- 접두사로 옮김. 토큰 조합만. */

/* ---------- 캐릭터 호스트 (renderCharacter) ---------- */
.char-host { position: relative; display: block; }
.char-host__art { position: absolute; inset: 0; }
.char-host__art.ds-char svg { overflow: visible; }
.char-host__deco { position: absolute; left: 0; top: 0; height: auto; pointer-events: none; }
.char-host__ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 56px; line-height: 1; }
.char-name { font-family: var(--font-display); font-size: var(--font-size-2xl); line-height: 1.1; }
.char-name--sm { font-size: var(--font-size-lg); }
[data-art="pixel"] .char-name { font-family: var(--font-pixel); font-size: 24px; }
[data-art="pixel"] .char-name--sm { font-size: 12px; }
.hm-sub { color: var(--color-text-sub); }
.hm-ico-16 { width: 16px; height: 16px; flex: none; }

/* ---------- S01 메인 ---------- */
.hm-page { display: grid; gap: var(--section-gap); }
.hm-page > [hidden] { display: none; }
.hm-hero { display: grid; gap: var(--space-3); }
.hm-char-row { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.hm-char-chip { min-height: var(--touch-min); padding-left: var(--space-1); gap: var(--space-2); }
.hm-char-chip[aria-pressed="true"] { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-text); }
.hm-char-chip__art { width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); overflow: hidden; flex: none; }
.hm-char-chip__art svg { transform: scale(1.4) translateY(-14%); } /* 캐릭터가 캔버스 아래쪽 → 얼굴을 원 가운데로 */
.hm-char-chip--add { padding-left: var(--space-3); color: var(--color-primary-text); border-style: dashed; }

.hm-stage { touch-action: pan-y; user-select: none; }
.hm-stage__card {
  position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%);
  width: 260px; height: 260px; padding: 0; border: 0; background: none; border-radius: var(--radius-xl);
}
.hm-stage__card .hm-stage__char { position: absolute; inset: 20px; }
.hm-stage__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hm-stage__bubble { max-width: 58%; z-index: 1; pointer-events: none; }
.hm-stage__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  background: var(--color-surface); opacity: 0.85; font-size: var(--font-size-xl); line-height: 1;
}
.hm-stage__nav--prev { left: var(--space-2); }
.hm-stage__nav--next { right: var(--space-2); }
@media (max-width: 380px) { .hm-stage__card { width: 220px; height: 220px; } }
@media (orientation: landscape) and (max-height: 500px) { .hm-stage__card { width: 180px; height: 180px; } }

.hm-char-info { display: grid; gap: var(--space-2); }
.hm-char-info__row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.hm-name-btn { background: none; border: 0; padding: 0; min-height: var(--touch-min); color: inherit; text-decoration: underline dotted var(--color-border-strong); text-underline-offset: 4px; }
.hm-equip-btn { position: relative; border: 0; padding: 0; }
.hm-equip-btn::after { content: ""; position: absolute; inset: -10px; } /* 터치 44 (M5) */
.hm-mood { margin-left: auto; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; }

.hm-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.hm-action {
  position: relative; flex-direction: column; gap: var(--space-1); min-height: 72px; padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-lg); font-size: var(--font-size-sm);
}
.hm-action__emoji { font-size: 26px; line-height: 1; }
.hm-action__count { position: absolute; top: var(--space-1); right: var(--space-1); }

.hm-add-task { margin-top: var(--space-2); color: var(--color-primary-text); }
.hm-big-num { font-size: var(--font-size-2xl); font-weight: var(--font-weight-heavy); }
.hm-week, .hm-saju-card { display: block; color: inherit; text-decoration: none; }
.hm-saju-card { background: var(--saju-brand-bg); }
.hm-saju-card__cap { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--saju-brand-fg); }
.hm-saju-card__quote { font-family: var(--font-display); font-size: var(--font-size-lg); line-height: var(--line-height-snug); margin: var(--space-1) 0; }

/* ---------- 시트 공통 ---------- */
.hm-sheet-row { margin: 0 calc(var(--space-5) * -1); padding-left: var(--space-5); padding-right: var(--space-5); }
.hm-sheet-row .ds-chip[aria-checked="true"] { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-text); }
.hm-foot { display: grid; gap: var(--space-2); justify-items: center; }
.hm-foot > .ds-btn { width: 100%; }
.hm-foot__link { font-size: var(--font-size-sm); }

/* S13 먹이 */
.hm-feed-target { display: flex; gap: var(--space-3); align-items: center; margin: var(--space-2) 0 var(--space-3); }
.hm-feed-target__art { width: var(--char-size-card); height: var(--char-size-card); flex: none; border-radius: var(--radius-md); background: var(--color-primary-soft); }
.hm-feed-target__main { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.hm-feed-target__name { margin: 0; }
.hm-feed-bonus { display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--shop-equip-fg); }
.hm-feed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.hm-feed-card { padding: var(--space-2); }
.hm-feed-card .ds-shop-card__thumb img { width: 48px; height: 48px; }
.hm-feed-card[aria-checked="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); }
.hm-feed-card[aria-disabled="true"] { cursor: not-allowed; }
.hm-feed-card[aria-disabled="true"] .ds-shop-card__effect { color: var(--color-text-sub); }
.hm-feed-preview { margin: var(--space-3) 0; font-size: var(--font-size-sm); min-height: 2.8em; }

/* 레벨업 (CH-08) */
.hm-levelup { text-align: center; }
.hm-levelup__sparkle { font-size: 28px; animation: hm-pop var(--duration-celebrate) var(--ease-pop) 2; }
.hm-levelup__art { display: block; width: var(--char-size-compare); height: var(--char-size-compare); margin: var(--space-2) auto var(--space-3); animation: hm-grow var(--duration-celebrate) var(--ease-pop); }
@keyframes hm-pop { 50% { transform: scale(1.3); } }
@keyframes hm-grow { 0% { transform: scale(0.6); opacity: 0; } 40% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hm-levelup__sparkle, .hm-levelup__art { animation: none; } }

/* S07 꾸미기 · 정보 */
.hm-s07-panel { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--space-5); margin-top: var(--space-3); }
.hm-slot__title { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); margin: 0 0 var(--space-2); }
.hm-slot__title .ds-caption { font-weight: var(--font-weight-regular); margin-left: var(--space-1); }
.hm-slot__row { margin: 0 calc(var(--space-5) * -1); padding: 2px var(--space-5) var(--space-1); }
.hm-tile {
  --cat-bg: var(--shop-food-bg);
  flex: none; scroll-snap-align: start; width: 88px; display: grid; justify-items: center; gap: 2px;
  padding: var(--space-1) var(--space-1) var(--space-2); border-radius: var(--radius-md);
  border: var(--border-width-strong) solid var(--color-border); background: var(--color-surface); color: inherit;
}
.hm-tile:active { transform: scale(0.96); }
.hm-tile[aria-checked="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); }
.hm-tile[data-cat="equip"] { --cat-bg: var(--shop-equip-bg); }
.hm-tile[data-cat="deco"] { --cat-bg: var(--shop-deco-bg); }
.hm-tile[data-cat="bg"] { --cat-bg: var(--shop-bg-bg); }
.hm-tile[data-cat="frame"] { --cat-bg: var(--shop-frame-bg); }
.hm-tile__thumb { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--cat-bg); display: grid; place-items: center; overflow: hidden; }
.hm-tile__thumb img { width: 48px; height: 48px; }
.hm-tile__thumb--wide img { width: 100%; height: 100%; object-fit: cover; }
.hm-tile__thumb--none { background: var(--color-surface-sunken); color: var(--color-text-sub); font-size: var(--font-size-xl); }
.hm-tile__name, .hm-tile__sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-tile__name { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.hm-tile__sub { font-size: var(--font-size-2xs); color: var(--color-text-sub); }
.hm-tile.is-locked { background: var(--color-surface-sunken); border-style: dashed; }
.hm-tile.is-locked .hm-tile__thumb > img { filter: grayscale(1); opacity: 0.45; }
.hm-tile.is-locked .hm-tile__sub { color: var(--color-primary-text); font-weight: var(--font-weight-semibold); }
.hm-tile__lock { position: absolute; inset: 0; display: grid; place-items: center; }

.hm-rename-row { display: flex; gap: var(--space-2); }
.hm-rename-row .ds-input { flex: 1; min-width: 0; }
.hm-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--font-size-md); }
.hm-kv dt { color: var(--color-text-sub); }
.hm-kv dd { margin: 0; text-align: right; font-weight: var(--font-weight-semibold); }
.hm-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.hm-compare__item { margin: 0; padding: var(--space-2); border-radius: var(--radius-md); border: var(--border-width-strong) solid transparent; background: var(--color-surface-sunken); text-align: center; }
.hm-compare__item.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); }
.hm-compare__item figcaption { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.hm-compare__art { width: 100%; max-width: var(--char-size-compare); aspect-ratio: 1; margin: 0 auto; }
.hm-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.hm-seg-label { display: inline-grid; place-items: center; cursor: pointer; }
.hm-seg-label:has(input:checked) { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-1); font-weight: var(--font-weight-bold); }
.hm-seg-label:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.hm-release { display: grid; justify-items: start; gap: var(--space-1); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-divider); }

/* ---------- S00 · S06 종 카드 (3열) ---------- */
.hm-species { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.hm-species__card {
  display: grid; justify-items: center; align-content: start; gap: var(--space-1);
  padding: var(--space-3) var(--space-1); border: var(--border-width-strong) solid transparent; text-align: center; color: inherit;
  transition: transform var(--duration-instant) var(--ease-out);
}
.hm-species__card:active { transform: scale(0.98); }
.hm-species__card[aria-checked="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); }
.hm-species__card:disabled { background: var(--color-surface-sunken); box-shadow: none; cursor: not-allowed; }
.hm-species__card:disabled .hm-species__art { filter: grayscale(1); opacity: 0.5; }
.hm-species__art { width: var(--char-size-card); height: var(--char-size-card); }
.hm-species__name { font-size: var(--font-size-md); }
.hm-species__passive { white-space: normal; height: auto; min-height: 22px; padding: 2px var(--space-2); text-align: center; }
.hm-species__off { font-weight: var(--font-weight-semibold); }

.hm-welcome { display: flex; flex-direction: column; gap: var(--space-6); min-height: calc(100dvh - var(--space-8)); padding-top: calc(var(--safe-top, 0px) + var(--space-6)); }
@supports not (height: 100dvh) { .hm-welcome { min-height: calc(100vh - var(--space-8)); } }
@media (min-width: 768px) { .hm-welcome { min-height: 100%; } }
.hm-welcome .hm-species { margin: 0; }
.hm-welcome__hero { text-align: center; }
.hm-welcome__brand { font-size: var(--font-size-lg); color: var(--color-primary-text); margin: 0; }
.hm-welcome__title { font-size: var(--font-size-2xl); margin: var(--space-1) 0 var(--space-2); }
.hm-welcome__foot { position: sticky; bottom: 0; margin-top: auto; padding: var(--space-4) 0 calc(var(--space-4) + var(--safe-bottom, 0px)); background: var(--color-bg); }