/* =========================================================
   청약마스터 앱 UI 프레임
   - 모바일: 앱 화면만 (최대 480px, 가운데 정렬)
   - PC(≥1024px): 좌측 브랜드·스토어 배지 + 우측 폰 프레임 안의 앱 화면
   페이지 본문은 반응형 구간을 뺀 tailwind-app.css 로 항상 모바일 레이아웃으로 그려진다.
   ========================================================= */
:root {
  --app-w: 480px;
  --app-bar-h: 56px;
  --app-tab-h: 62px;
  --app-safe-b: env(safe-area-inset-bottom, 0px);
  --app-bg: #f2f4f6;
  --app-ink: #191f28;
  --app-ink-2: #4e5968;
  --app-ink-3: #8b95a1;
  --app-line: #e5e8eb;
  --app-blue: #0066cc;
  --app-blue-soft: #e8f3ff;
  --app-green: #00a661;
  --app-green-soft: #e5f8ef;
  --app-red: #f04452;
  --app-radius: 20px;
}

html { background: var(--app-bg); }
html.app-locked, html.app-locked body { overflow: hidden; }
body.app-body {
  margin: 0;
  background: var(--app-bg);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 앱 컨테이너 (모바일 기본) ---------- */
.app-promo { display: none; }
.app-device {
  position: relative;
  max-width: var(--app-w);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
}
.app-screen { outline: none; }
.app-main { min-height: calc(100vh - var(--app-bar-h) - 200px); }
/* 앱 화면 안에서는 페이지 컨테이너의 좌우 여백을 앱 기준(20px)으로 */
.app-main .max-w-6xl, .app-main .max-w-5xl, .app-main .max-w-4xl,
.app-main .max-w-3xl, .app-main .max-w-2xl, .app-main .max-w-7xl { max-width: 100%; }

@media (min-width: 481px) and (max-width: 1023.98px) {
  .app-device { box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 10px 40px rgba(15,23,42,.08); }
}

/* ---------- 앱바 ---------- */
.app-bar {
  position: sticky; top: 0; z-index: 60;
  height: var(--app-bar-h);
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px 0 12px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.app-bar.is-scrolled { border-bottom-color: var(--app-line); }
.app-bar-brand { display: flex; align-items: center; gap: 8px; padding-left: 4px; color: var(--app-ink); text-decoration: none; }
.app-bar-brand img { border-radius: 7px; }
.app-bar-brand span { font-size: 19px; font-weight: 800; letter-spacing: -0.6px; }
.app-bar-title {
  flex: 1; min-width: 0; margin: 0;
  font-size: 17px; font-weight: 700; letter-spacing: -0.4px; color: var(--app-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.app-bar-btn {
  position: relative; width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--app-ink); border-radius: 12px; cursor: pointer;
}
.app-bar-btn:active { background: var(--app-bg); }
.app-bar-btn svg { width: 24px; height: 24px; }
.app-bar-login {
  height: 34px; padding: 0 14px; margin-right: 4px;
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 700; color: var(--app-blue);
  background: var(--app-blue-soft); border-radius: 999px; text-decoration: none;
}

/* 알림 패널 */
.app-noti { position: relative; }
.app-noti-badge {
  position: absolute; top: 6px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px;
  font-size: 10px; font-weight: 700; line-height: 16px; color: #fff; text-align: center;
  background: var(--app-red); border-radius: 999px;
}
.app-noti-panel {
  position: absolute; top: 48px; right: -44px; width: min(360px, calc(100vw - 24px));
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(15,23,42,.16), 0 0 0 1px rgba(0,0,0,.04);
}
.app-noti-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--app-line); }
.app-noti-head span { font-size: 15px; font-weight: 700; color: var(--app-ink); }
.app-noti-head button { border: 0; background: none; font-size: 13px; color: var(--app-blue); cursor: pointer; }
.app-noti-list { max-height: 360px; overflow-y: auto; }
.app-noti-empty { padding: 32px 16px; text-align: center; font-size: 14px; color: var(--app-ink-3); margin: 0; }

/* ---------- 하단 탭바 ---------- */
.app-tabbar {
  position: fixed; z-index: 70; bottom: 0; left: var(--app-cx, 50%); transform: translateX(-50%);
  width: 100%; max-width: var(--app-w);
  height: calc(var(--app-tab-h) + var(--app-safe-b));
  padding-bottom: var(--app-safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--app-line);
}
.app-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; cursor: pointer; text-decoration: none;
  color: var(--app-ink-3); font: inherit;
}
.app-tab svg { width: 24px; height: 24px; }
.app-tab span { font-size: 11px; font-weight: 600; letter-spacing: -0.2px; }
.app-tab.is-active { color: var(--app-ink); }
.app-tab.is-active svg { stroke-width: 2.3; }
.app-tab:active svg { transform: scale(.92); }

/* 탭바에 가려지지 않도록 화면 하단 여백 */
.app-footer { padding: 28px 20px calc(var(--app-tab-h) + var(--app-safe-b) + 28px); background: var(--app-bg); }
.app-footer-note { margin: 0 0 12px; font-size: 12px; line-height: 1.6; color: var(--app-ink-3); letter-spacing: -0.2px; }
.app-footer-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 12px; }
.app-footer-links a { font-size: 12.5px; color: var(--app-ink-2); text-decoration: none; }
.app-footer-biz { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--app-ink-3); }
.app-footer-biz a { color: inherit; }

/* ---------- 전체 메뉴 시트 ---------- */
.app-sheet-dim { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.42); }
.app-sheet {
  position: fixed; z-index: 90; left: var(--app-cx, 50%); bottom: 0;
  width: 100%; max-width: var(--app-w); max-height: 86%;
  transform: translate(-50%, 105%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 24px 24px 0 0;
  padding-bottom: var(--app-safe-b);
  visibility: hidden;
}
.app-sheet.is-open { transform: translate(-50%, 0); visibility: visible; }
.app-sheet-grip { width: 36px; height: 4px; border-radius: 4px; background: #d1d6db; margin: 10px auto 4px; flex: none; }
.app-sheet-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px 20px; flex: none; }
.app-sheet-close { margin-left: auto; width: 40px; height: 40px; border: 0; background: var(--app-bg); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--app-ink-2); cursor: pointer; flex: none; }
.app-sheet-close svg { width: 20px; height: 20px; }
.app-sheet-login { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--app-blue-soft); border-radius: 16px; text-decoration: none; }
.app-sheet-login b { font-size: 16px; color: var(--app-ink); letter-spacing: -0.4px; }
.app-sheet-login span { font-size: 13px; color: var(--app-blue); font-weight: 600; }
.app-sheet-user { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-sheet-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--app-blue-soft); color: var(--app-blue); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex: none; }
.app-sheet-user div { display: flex; flex-direction: column; min-width: 0; }
.app-sheet-user b { font-size: 16px; color: var(--app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sheet-user a { font-size: 13px; color: var(--app-blue); text-decoration: none; font-weight: 600; }
.app-sheet-user form { margin: 0 0 0 auto; }
.app-sheet-user form button { border: 0; background: none; font-size: 13px; color: var(--app-ink-3); cursor: pointer; padding: 8px; }
.app-sheet-body { overflow-y: auto; padding: 0 20px 24px; overscroll-behavior: contain; }
.app-sheet-group { margin: 18px 0 6px; font-size: 13px; font-weight: 700; color: var(--app-ink-3); }
.app-sheet-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.app-sheet-links a { padding: 11px 0; font-size: 15.5px; font-weight: 500; color: var(--app-ink); text-decoration: none; letter-spacing: -0.3px; }
.app-sheet-links a:active { color: var(--app-blue); }

/* =========================================================
   PC: 좌측 고정 패널(브랜드·바로가기·스토어) + 우측 모바일 폭 앱 화면
   테두리 없이 화면 높이 전체를 쓰고, 스크롤은 일반 웹처럼 창(window)이 한다.
   탭바·메뉴 시트는 --app-cx(앱 화면 가로 중심)에 맞춰 고정된다.
   ========================================================= */
@media (min-width: 1024px) {
  :root { --promo-w: 340px; --layout-gap: 48px; --app-cx: calc(50% + (var(--promo-w) + var(--layout-gap)) / 2); }
  body.app-body {
    display: flex; justify-content: center; align-items: flex-start; gap: var(--layout-gap);
    background:
      radial-gradient(1100px 700px at 12% 0%, #e3efff 0%, rgba(227,239,255,0) 60%),
      radial-gradient(900px 700px at 100% 100%, #e9f7f0 0%, rgba(233,247,240,0) 60%),
      #f4f6f9;
    background-attachment: fixed;
  }
  .app-promo {
    display: flex; flex-direction: column; justify-content: center;
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    width: var(--promo-w); flex: none; padding: 40px 0;
    color: var(--app-ink); overflow-y: auto; scrollbar-width: none;
  }
  .app-promo::-webkit-scrollbar { display: none; }
  .app-device {
    width: var(--app-w); flex: none; margin: 0;
    min-height: 100vh; min-height: 100dvh;
    box-shadow: 0 0 0 1px rgba(15,23,42,.05), 0 0 60px rgba(15,23,42,.08);
  }

  /* 좌측 패널 */
  .app-promo-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--app-ink); margin-bottom: 28px; }
  .app-promo-brand img { border-radius: 12px; box-shadow: 0 6px 18px rgba(0,102,204,.22); }
  .app-promo-brand span { font-size: 24px; font-weight: 800; letter-spacing: -0.9px; }
  .app-promo-title { margin: 0 0 12px; font-size: 32px; line-height: 1.3; font-weight: 800; letter-spacing: -1.3px; }
  .app-promo-desc { margin: 0 0 24px; font-size: 15.5px; line-height: 1.6; color: var(--app-ink-2); letter-spacing: -0.3px; }
  .app-promo-cta {
    display: flex; align-items: center; justify-content: space-between;
    height: 58px; padding: 0 20px; margin-bottom: 14px;
    background: var(--app-blue); color: #fff !important; border-radius: 16px;
    font-size: 16.5px; font-weight: 700; letter-spacing: -0.4px; text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(0,102,204,.55); transition: transform .15s, background .15s;
  }
  .app-promo-cta:hover { background: #0057ad; transform: translateY(-1px); }
  .app-promo-cta svg { width: 20px; height: 20px; }
  .app-promo-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 28px; }
  .app-promo-menu a {
    display: flex; align-items: center; gap: 10px; padding: 13px 14px;
    background: rgba(255,255,255,.75); border: 1px solid rgba(15,23,42,.06); border-radius: 14px;
    font-size: 14.5px; font-weight: 600; color: var(--app-ink); text-decoration: none; letter-spacing: -0.3px;
    transition: background .15s, border-color .15s;
  }
  .app-promo-menu a:hover { background: #fff; border-color: rgba(0,102,204,.35); }
  .app-promo-menu a.is-active { background: #fff; border-color: var(--app-blue); color: var(--app-blue); }
  .app-promo-menu i { font-style: normal; font-size: 18px; line-height: 1; }
  .app-promo-points { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .app-promo-points li { position: relative; padding-left: 26px; font-size: 14px; color: var(--app-ink-2); letter-spacing: -0.3px; }
  .app-promo-points li::before {
    content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--app-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat;
  }
  .app-promo-points b { color: var(--app-ink); margin-right: 5px; }
  .app-promo-get { display: flex; align-items: center; gap: 14px; }
  .app-promo-stores { display: flex; flex-direction: column; gap: 8px; }
  .app-store-badge {
    display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px 0 12px;
    background: #111; color: #fff; border-radius: 11px; text-decoration: none; transition: transform .15s;
  }
  a.app-store-badge:hover { transform: translateY(-2px); }
  .app-store-badge svg { width: 22px; height: 22px; }
  .app-store-text { display: flex; flex-direction: column; line-height: 1.1; font-size: 15px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; }
  .app-store-text small { font-size: 10px; font-weight: 500; opacity: .8; letter-spacing: 0; }
  .app-store-badge.is-soon { cursor: default; }
  .app-store-badge.is-soon small { color: #8fd3ff; opacity: 1; font-weight: 700; }
  .app-promo-qr { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; background: rgba(255,255,255,.75); border: 1px solid rgba(15,23,42,.06); border-radius: 14px; }
  .app-promo-qr img { background: #fff; padding: 4px; border-radius: 8px; width: 80px; height: 80px; }
  .app-promo-qr p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--app-ink-3); }
  .app-promo-qr b { display: block; font-size: 13.5px; color: var(--app-ink); margin-bottom: 2px; }
  .app-noti-panel { width: 340px; }
}
@media (min-width: 1200px) {
  :root { --promo-w: 400px; --layout-gap: 88px; }
  .app-promo-title { font-size: 36px; }
}
/* 좁은 PC: QR은 숨기고 스토어 배지를 가로로 */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .app-promo-qr { display: none; }
  .app-promo-stores { flex-direction: row; }
}
/* 세로가 낮은 화면: 덜 중요한 요소부터 숨겨 패널이 넘치지 않게 */
@media (min-width: 1024px) and (max-height: 820px) { .app-promo-points { display: none; } }
@media (min-width: 1024px) and (max-height: 680px) { .app-promo-qr, .app-promo-desc { display: none; } }

/* =========================================================
   홈 (앱 UI 전용)
   ========================================================= */
body.is-home .app-device, body.is-home .app-bar { background-color: var(--app-bg); }
body.is-home .app-bar { background: rgba(242,244,246,.92); }
.ap-home { padding: 4px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
.ap-card { background: #fff; border-radius: var(--app-radius); padding: 22px 20px; }
.ap-hero { padding: 26px 22px 22px; }
.ap-live { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--app-green); background: var(--app-green-soft); padding: 5px 10px; border-radius: 999px; margin-bottom: 14px; }
.ap-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: apPulse 1.6s infinite; }
@keyframes apPulse { 50% { opacity: .35; } }
.ap-hero h1 { margin: 0 0 10px; font-size: 27px; line-height: 1.32; font-weight: 800; letter-spacing: -1px; color: var(--app-ink); }
.ap-hero p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.6; color: var(--app-ink-2); letter-spacing: -0.3px; }
.ap-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 56px; border-radius: 16px; font-size: 17px; font-weight: 700; letter-spacing: -0.4px;
  text-decoration: none; transition: transform .12s, background .12s;
}
.ap-btn:active { transform: scale(.98); }
.ap-btn-primary { background: var(--app-blue); color: #fff !important; }
.ap-btn-primary:active { background: #0057ad; }
.ap-btn-ghost { background: var(--app-bg); color: var(--app-ink) !important; height: 50px; font-size: 15.5px; margin-top: 8px; }
.ap-trust { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; }
.ap-trust span { font-size: 12.5px; color: var(--app-ink-3); display: inline-flex; align-items: center; gap: 4px; }
.ap-trust span::before { content: "✓"; color: var(--app-blue); font-weight: 800; }

.ap-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.ap-sec-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.6px; color: var(--app-ink); }
.ap-more { font-size: 14px; font-weight: 600; color: var(--app-ink-3) !important; text-decoration: none; padding: 6px 0 6px 12px; }
.ap-sub { margin: 0 0 8px; font-size: 13.5px; color: var(--app-ink-3); }

.ap-list { display: flex; flex-direction: column; }
.ap-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; text-decoration: none; color: inherit; border-top: 1px solid #f2f4f6; }
.ap-row:first-child { border-top: 0; }
.ap-row:active { opacity: .6; }
.ap-row-main { flex: 1; min-width: 0; }
.ap-row-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--app-ink); letter-spacing: -0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-row-meta { margin: 3px 0 0; font-size: 13px; color: var(--app-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; margin-right: 6px; vertical-align: 1px; }
.ap-chip-on { color: var(--app-green); background: var(--app-green-soft); }
.ap-chip-soon { color: var(--app-blue); background: var(--app-blue-soft); }
.ap-chip-gray { color: var(--app-ink-2); background: #f2f4f6; }
.ap-dday { flex: none; text-align: right; }
.ap-dday b { display: block; font-size: 16px; font-weight: 800; color: var(--app-ink); letter-spacing: -0.3px; }
.ap-dday b.is-urgent { color: var(--app-red); }
.ap-dday small { font-size: 11.5px; color: var(--app-ink-3); }
.ap-empty { padding: 18px 0 6px; font-size: 14px; color: var(--app-ink-3); }

.ap-date { flex: none; width: 44px; text-align: center; }
.ap-date b { display: block; font-size: 19px; font-weight: 800; color: var(--app-ink); line-height: 1.1; }
.ap-date small { font-size: 11.5px; color: var(--app-ink-3); }
.ap-date.is-today b, .ap-date.is-today small { color: var(--app-blue); }

.ap-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ap-tool { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #f9fafb; border-radius: 16px; text-decoration: none; }
.ap-tool:active { background: #f2f4f6; }
.ap-tool i { font-style: normal; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; }
.ap-tool b { font-size: 15.5px; font-weight: 700; color: var(--app-ink); letter-spacing: -0.4px; }
.ap-tool span { font-size: 12.5px; color: var(--app-ink-3); margin-top: -6px; line-height: 1.4; }

.ap-alert { display: flex; align-items: center; gap: 14px; background: #191f28; color: #fff; text-decoration: none; }
.ap-alert i { font-style: normal; font-size: 28px; flex: none; }
.ap-alert b { display: block; font-size: 16.5px; letter-spacing: -0.4px; color: #fff; }
.ap-alert span { font-size: 13.5px; color: rgba(255,255,255,.7); }
.ap-alert em { margin-left: auto; font-style: normal; flex: none; font-size: 13.5px; font-weight: 700; color: #191f28; background: #fff; padding: 9px 14px; border-radius: 999px; }

.ap-post { display: flex; gap: 12px; align-items: center; padding: 12px 0; text-decoration: none; border-top: 1px solid #f2f4f6; }
.ap-post:first-child { border-top: 0; }
.ap-post img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; background: #f2f4f6; }
.ap-post b { font-size: 15px; font-weight: 700; color: var(--app-ink); letter-spacing: -0.4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-post small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--app-ink-3); }

.ap-faq details { border-top: 1px solid #f2f4f6; }
.ap-faq details:first-of-type { border-top: 0; }
.ap-faq summary { list-style: none; cursor: pointer; padding: 15px 28px 15px 0; position: relative; font-size: 15.5px; font-weight: 600; color: var(--app-ink); letter-spacing: -0.3px; }
.ap-faq summary::-webkit-details-marker { display: none; }
.ap-faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--app-ink-3); border-bottom: 2px solid var(--app-ink-3); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.ap-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ap-faq details p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.7; color: var(--app-ink-2); }
.ap-about { font-size: 13.5px; line-height: 1.7; color: var(--app-ink-3); padding: 4px 6px 0; margin: 0; }

/* =========================================================
   하위 페이지를 앱 화면답게 (기존 마크업은 그대로, 앱 UI에서만 덮어쓰기)
   ========================================================= */
/* 창 폭(vw) 기반 글자 크기는 PC 프레임 안에서 폰보다 커지므로 고정값으로 */
.app-main .apple-hero-display { font-size: calc(32px * var(--font-scale)) !important; line-height: 1.2; }
.app-main .apple-section-title { font-size: calc(24px * var(--font-scale)); line-height: 1.25; }
.app-main [style*="vw"] { font-size: calc(24px * var(--font-scale)) !important; line-height: 1.25 !important; }

/* 페이지 상단 히어로: 앱바가 제목·뒤로가기를 맡으므로 여백을 줄이고 왼쪽 정렬 */
.app-main .apple-page-hero,
.app-main .apple-page-hero-parchment { padding: 16px 0 20px !important; text-align: left; }
.app-main .apple-page-hero > div,
.app-main .apple-page-hero-parchment > div { padding-left: 20px; padding-right: 20px; }
.app-main .apple-page-hero .apple-section-title,
.app-main .apple-page-hero-parchment .apple-section-title { font-size: calc(25px * var(--font-scale)); font-weight: 800; letter-spacing: -0.8px; margin-bottom: 8px !important; }
.app-main .apple-page-hero .apple-lead,
.app-main .apple-page-hero-parchment .apple-lead { font-size: calc(15px * var(--font-scale)); line-height: 1.6; color: var(--app-ink-2); margin-left: 0 !important; letter-spacing: -0.3px; }
.app-main .apple-page-hero .mx-auto { margin-left: 0; }
.app-main .apple-page-hero .justify-center { justify-content: flex-start; }
.app-main .apple-crumb { margin-bottom: 10px !important; font-size: 12px; }

/* PC 홈: 좌측 패널이 소개·진단 버튼을 맡으므로 우측 첫 카드(같은 문구)는 숨기고 공고 목록부터 */
@media (min-width: 1024px) {
  body.is-home .ap-hero { display: none; }
  body.is-home .ap-home { padding-top: 8px; }
}

/* 하단 탭 가운데 '피드' 강조 (핵심 기능) */
.app-tab-feed svg { width: 30px; height: 30px; padding: 4px; border-radius: 11px; background: linear-gradient(135deg, #ff7a3d, #f43f7a); color: #fff; stroke: #fff; box-sizing: border-box; }
.app-tab-feed svg path[fill] { fill: #fff; }
.app-tab-feed span { color: var(--app-ink); }
.app-tab-feed.is-active svg { box-shadow: 0 4px 12px rgba(244,63,122,.4); }