/* '/apps/' 별하늘이 만든 앱 5개 바로가기 배너 (build/appBanners.mjs).
   글·색 값은 앱 안 '추천 앱' 배너와 같다 (studio docs/apps/공통_추천앱_배너.md · card-kit recommend.ts).
   바깥 틀은 소개되는 앱 자기 것 (앱 안에서는 놓이는 앱 것). 글꼴은 웹의 Pretendard 하나 (새 글꼴을 싣지 않는다).
   글 크기는 배너 폭에 비례 (기준 328×152 → cqw), 컨테이너 단위를 모르는 브라우저는 px 값. */

.apps { margin-top: 16px; }
.ab-android { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ab-os {
  flex: none; padding: 3px 8px; border-radius: 99px; background: var(--tint); color: var(--primary);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.ab-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ab-foot { text-align: center; }

/* 바깥 틀 (슬롯) */
.ab-slot { position: relative; }
.ab {
  container-type: inline-size; position: relative; display: block; overflow: hidden;
  aspect-ratio: 328 / 152; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease;
}
.ab:active { transform: scale(0.97); }
.ab:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.ab-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0F2E2B; }

/* 글 묶음: 세로 가운데, 왼쪽 여백 18 · 폭 63% */
.ab-txt {
  position: absolute; inset: 0 auto 0 0; z-index: 1; width: 63%; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: 1cqw;
  padding: 0 0 0 18px; padding-left: 5.5cqw;
  color: #F7EFE6;
}
.ab-eyebrow { font-size: 11px; font-size: 3.4cqw; font-weight: 700; letter-spacing: .14em; opacity: .95; }
.ab-name { font-size: 26px; font-size: 8cqw; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.ab-pitch { margin-top: .6cqw; font-size: 13px; font-size: 3.9cqw; line-height: 1.45; opacity: .9; white-space: nowrap; word-break: keep-all; }
.ab-chip {
  align-self: flex-start; margin-top: 8px; margin-top: 2.4cqw; padding: 5px 11px; padding: 1.6cqw 3.4cqw;
  border-radius: 99px; font-size: 11.5px; font-size: 3.5cqw; font-weight: 700; line-height: 1.2; white-space: nowrap;
}

/* 별하늘: 연한 패널 틀 (D-009) · 호박 */
.ab-byeolhaneul { border: 1px solid #E1E7E4; border-radius: 14px; background: #F4F7F6; }
.ab-byeolhaneul .ab { border-radius: 13px; }
.ab-byeolhaneul .ab-eyebrow { color: #F2A81D; }
.ab-byeolhaneul .ab-chip { background: #F2A81D; color: #0F2E2B; }

/* 별걸음: 옻칠 남색 틀 + 금 겹선 · 밝은 금 */
.ab-solitaire {
  padding: 7px; border: 1px solid rgba(217, 179, 90, .55); border-radius: 10px;
  background: linear-gradient(180deg, #152147, #0C1230);
  outline: 1px solid rgba(217, 179, 90, .25); outline-offset: -6px;
}
.ab-solitaire .ab { border-radius: 5px; }
.ab-solitaire .ab-eyebrow { color: #F3D98B; }
.ab-solitaire .ab-chip { background: linear-gradient(180deg, #FBEBB4 0%, #E6C56F 55%, #C9A04A 100%); color: #2A1E07; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }

/* 타로 런: 놋쇠 2px 틀 + 안쪽 겹선 · 불씨 · 놋쇠 이름 */
.ab-tarot-run {
  padding: 6px; border: 2px solid #C9953E; border-radius: 4px; background: #2B1A12;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .45);
  outline: 1px solid #7A5520; outline-offset: -5px;
}
.ab-tarot-run .ab { border-radius: 2px; }
.ab-tarot-run .ab-txt { width: 58%; padding-left: 26px; padding-left: 7.9cqw; color: #F6F2EA; }
.ab-tarot-run .ab-eyebrow { color: #D8692E; }
.ab-tarot-run .ab-name { color: #EFD28A; text-shadow: 0 0 5cqw rgba(239, 210, 138, .5), 0 1px 0 #5A3C12; }
.ab-tarot-run .ab-chip { background: linear-gradient(180deg, #EFD28A 0%, #C9953E 55%, #9A6E2A 100%); color: #2B1B12; border: 1px solid #5A3C12; box-shadow: 0 1px 0 #5A3C12; }

/* 하루꽃: 둥근 장밋빛 틀 · 장미 · 크림 단추 */
.ab-malkkot {
  padding: 5px; border: 1px solid rgba(232, 165, 160, .45); border-radius: 20px;
  background: #2A1E2E; box-shadow: 0 12px 30px rgba(43, 29, 46, .22);
}
.ab-malkkot .ab { border-radius: 16px; }
.ab-malkkot .ab-txt { padding-left: 25px; padding-left: 7.6cqw; }
.ab-malkkot .ab-eyebrow { color: #E8A5A0; }
.ab-malkkot .ab-chip { background: #F7EFE6; color: #2B1D2E; box-shadow: 0 10px 22px rgba(0, 0, 0, .35); }

/* 타로 78일: 크림 종이 틀 + 종이 들림 · 금박 */
.ab-school {
  padding: 4px; border: 1px solid #B8923E; border-radius: 8px; background: #FAF4E6;
  box-shadow: 0 2px 0 #D9CCB0;
}
.ab-school .ab { border-radius: 5px; }
.ab-school .ab-txt { padding-left: 25px; padding-left: 7.6cqw; color: #F3EAD6; }
.ab-school .ab-eyebrow, .ab-school .ab-name { color: #D8B86A; }
.ab-school .ab-chip { background: #D8B86A; color: #1E3A2F; }

@media (prefers-reduced-motion: reduce) { .ab { transition: none; } .ab:active { transform: none; } }

/* ── 첫 쪽(한국어) '다른 고민도 한 장으로' 아래 새 앱 4개 칸 (homeAppsBlock) */
.home-apps {
  margin-top: 20px; padding: 22px 16px 16px; border-radius: var(--radius); color: #F7EFE6;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 30%, #F2A81D 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 8%, #fff6 50%, transparent 51%),
    radial-gradient(120% 70% at 85% 0%, #1B4A44 0%, transparent 60%),
    var(--dark);
}
.ha-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--star); letter-spacing: .04em; }
.ha-os { padding: 2px 7px; border-radius: 99px; background: #ffffff1f; color: #ffffffd9; font-size: 11px; letter-spacing: .02em; }
.home-apps h2 { margin: 0; font-size: 22px; line-height: 1.35; color: #fff; }
.ha-sub { margin: 6px 0 16px; font-size: 14px; color: #ffffffb3; }
.ha-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ha-tile a {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; box-sizing: border-box;
  border: 1px solid var(--ha-line); border-radius: 12px; background: var(--ha-bg); color: #F7EFE6;
  text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 120ms ease;
}
.ha-tile a:active { transform: scale(0.97); }
.ha-tile a:focus-visible { outline: 3px solid var(--star); outline-offset: 2px; }
.ha-art { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; background: var(--ha-bg); }
.ha-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
/* 그림판 왼쪽 글 자리(어두운 판·유리판)의 가장자리가 칸 안에 보이지 않게 칸 바탕색으로 녹인다 */
.ha-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ha-bg) 0%, transparent 28%), linear-gradient(0deg, var(--ha-bg) 0%, transparent 22%); pointer-events: none; }
.ha-malkkot .ha-art::after { background: linear-gradient(90deg, var(--ha-bg) 0%, var(--ha-bg) 30%, transparent 62%), linear-gradient(0deg, var(--ha-bg) 0%, transparent 22%); }
.ha-txt { display: flex; flex-direction: column; gap: 2px; padding: 10px 30px 12px 11px; }
.ha-kind { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ha-accent); }
.ha-name { font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--ha-name, #F7EFE6); }
.ha-line { font-size: 12px; line-height: 1.4; color: #ffffffbf; word-break: keep-all; }
.ha-go {
  position: absolute; right: 9px; bottom: 12px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; line-height: 1;
  background: var(--ha-chip); color: var(--ha-chip-ink);
}
.ha-solitaire { --ha-bg: #0C1230; --ha-line: rgba(217, 179, 90, .6); --ha-accent: #F3D98B; --ha-chip: linear-gradient(180deg, #FBEBB4, #C9A04A); --ha-chip-ink: #2A1E07; }
.ha-tarot-run { --ha-bg: #140E0B; --ha-line: #C9953E; --ha-accent: #D8692E; --ha-name: #EFD28A; --ha-chip: linear-gradient(180deg, #EFD28A, #9A6E2A); --ha-chip-ink: #2B1B12; }
.ha-tarot-run a { border-width: 2px; border-radius: 6px; }
.ha-malkkot { --ha-bg: #241A28; --ha-line: rgba(232, 165, 160, .6); --ha-accent: #E8A5A0; --ha-chip: #F7EFE6; --ha-chip-ink: #2B1D2E; }
.ha-malkkot a { border-radius: 18px; }
.ha-school { --ha-bg: #1E3A2F; --ha-line: #B8923E; --ha-accent: #D8B86A; --ha-name: #D8B86A; --ha-chip: #D8B86A; --ha-chip-ink: #1E3A2F; }
.ha-school a { border-radius: 8px; }
.ha-all {
  display: block; margin-top: 14px; padding: 12px; border-radius: 12px; text-align: center;
  background: var(--star); color: var(--dark); font-size: 15px; font-weight: 700; text-decoration: none;
}
.ha-all:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { .ha-tile a, .ha-all { transition: none; } .ha-tile a:active, .ha-all:active { transform: none; } }