/* ==========================================================================
   휴대폰 앱 화면 (680px 이하에서만)
   PC 화면은 그대로 두고, 휴대폰에서만 아래 세 가지를 바꾼다.
     1. 하단 탭바 — 어느 화면에서든 엄지로 이동 (탭바 마크업은 mobile.js 가 넣는다)
     2. 첫 화면 — 히어로 아래에 할 일 세 가지만 큰 버튼으로
     3. 긴 설명 — data-m-fold 가 붙은 섹션은 제목 한 줄로 접어 둔다
   brand.css 다음에 불러온다.
   ========================================================================== */

.m-quick, .m-tabbar, .m-fold-btn { display: none; }

@media (max-width: 680px) {

  /* ---------- 1. 하단 탭바 ---------- */
  body.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .m-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--n-0); border-top: 1px solid var(--n-300);
    padding: 4px max(4px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
  }
  .m-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; padding: 4px 0;
    font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.2;
    color: var(--n-500); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .m-tab svg { width: 24px; height: 24px; }
  .m-tab[aria-current="page"] { color: var(--brand-primary); font-weight: 800; }
  .m-tab:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: -3px; border-radius: 8px; }

  /* 탭바가 같은 일을 하므로 ☰ 메뉴와 하단 고정 버튼은 감춘다 */
  .has-tabbar .nav-toggle,
  .has-tabbar .cr-sticky { display: none !important; }

  /* ---------- 2. 첫 화면 ---------- */
  .cr-hero { padding: 92px 0 28px; }
  .cr-hero-sub, .cr-hero-cta, .cr-hero-note { display: none; }

  .m-quick { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
  .m-act {
    display: grid; grid-template-columns: 1fr 20px; align-items: center; gap: 12px;
    padding: 16px 16px 16px 18px; border-radius: 14px;
    background: var(--n-0); color: var(--n-900); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .m-act b { display: block; font-size: 17px; font-weight: 800; line-height: 1.3; }
  .m-act > span { min-width: 0; }
  .m-act b + span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--n-500); }
  .m-act::after {
    content: ""; width: 9px; height: 9px; justify-self: center;
    border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
    opacity: .5;
  }
  .m-act-main { background: var(--brand-accent); color: var(--n-0); }
  .m-act-main b + span { color: #FFE3E5; }
  .m-act:active { transform: scale(.985); }
  .m-act:focus-visible { outline: 3px solid var(--n-0); outline-offset: 2px; }
  .m-free {
    align-self: flex-start; margin: 4px 0 0; padding: 5px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 700; color: var(--n-dark); background: #FFD9DC;
  }

  .m-quick-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
  .m-quick-foot .m-free { margin: 0; }
  .m-install {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
    border: 1px solid rgba(255,255,255,.6); border-radius: 999px; background: transparent;
    font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--n-0); cursor: pointer;
  }
  .m-install svg { width: 16px; height: 16px; }
  .m-install:focus-visible { outline: 3px solid var(--n-0); outline-offset: 2px; }

  /* 탭에 따로 있는 내용과 꾸밈 띠는 첫 화면에서 뺀다 */
  #home .cr-photoband, #home .cr-plans, #home .cr-close { display: none; }

  /* ---------- 3. 접는 섹션 ---------- */
  .m-fold { padding: 0 !important; background: var(--n-0) !important; color: var(--n-900); border-bottom: 1px solid var(--n-300); }
  .m-fold.m-fold-first { border-top: 1px solid var(--n-300); margin-top: 8px; }
  .m-fold.m-fold-first::before {
    content: "더 알아보기"; display: block; padding: 22px 16px 4px;
    font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--n-500);
  }
  .m-fold-btn {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 16px; border: 0; background: none; cursor: pointer; text-align: left;
    font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--n-900);
  }
  .m-fold-btn::after {
    content: ""; flex: none; width: 9px; height: 9px;
    border-right: 2px solid var(--n-500); border-bottom: 2px solid var(--n-500);
    transform: translateY(-3px) rotate(45deg); transition: transform 180ms ease;
  }
  .m-fold.is-open > .m-fold-btn::after { transform: translateY(1px) rotate(-135deg); }
  .m-fold-btn:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: -3px; }
  .m-fold:not(.is-open) > :not(.m-fold-btn) { display: none !important; }

  /* 펼친 섹션은 원래 배경(어두운 철학 섹션 등)을 살린다 */
  .m-fold.is-open { padding-bottom: 40px !important; }
  .m-fold.cr-ethos.is-open { background: var(--n-dark) !important; color: var(--n-0); }
  .m-fold.cr-ethos.is-open > .m-fold-btn { color: var(--n-0); }
  .m-fold.cr-ethos.is-open > .m-fold-btn::after { border-color: rgba(255,255,255,.7); }
}

/* ---------- 앱 설치 안내 시트 (mobile.js 가 만든다) ---------- */
.m-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.m-sheet[hidden] { display: none; }
.m-sheet-open, .m-sheet-open body { overflow: hidden; }
.m-sheet-dim { position: absolute; inset: 0; background: rgba(26, 5, 7, .55); }
.m-sheet-box {
  position: relative; width: 100%; max-width: 480px; max-height: 88%; overflow-y: auto;
  background: var(--n-0); color: var(--n-900); border-radius: 20px 20px 0 0;
  padding: 20px max(18px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  font-family: var(--font-body); animation: m-sheet-in 220ms ease-out;
}
@keyframes m-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.m-sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.m-sheet-head img { border-radius: 10px; flex: none; }
.m-sheet-head h2 { flex: 1; margin: 0; font-size: 18px; font-weight: 800; line-height: 1.35; outline: none; }
.m-sheet-x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--n-100); font-size: 22px; line-height: 1; color: var(--n-700); cursor: pointer; }
.m-sheet-body { display: flex; flex-direction: column; gap: 12px; }
.m-sheet-lead { margin: 0; font-size: 15px; line-height: 1.6; color: var(--n-700); }
.m-sheet-sub { margin: 0; font-size: 14px; line-height: 1.6; color: var(--n-500); }
.m-sheet-btn {
  width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: var(--brand-accent);
  font-family: var(--font-body); font-size: 17px; font-weight: 800; color: var(--n-0); cursor: pointer;
}
.m-steps { margin: 0; padding: 0; list-style: none; counter-reset: m-step; display: flex; flex-direction: column; gap: 10px; }
.m-steps li {
  counter-increment: m-step; position: relative; padding: 12px 14px 12px 50px;
  background: var(--n-100); border-radius: 12px; font-size: 15px; line-height: 1.55; color: var(--n-900);
}
.m-steps li::before {
  content: counter(m-step); position: absolute; left: 14px; top: 11px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--brand-primary); color: var(--n-0);
  display: grid; place-items: center; font-family: var(--font-point); font-size: 14px;
}
.m-ico { width: 18px; height: 18px; vertical-align: -3px; color: #0A7AFF; }
.m-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border: 1px solid var(--n-300); border-radius: 12px; }
.m-copy span { min-width: 0; font-size: 15px; font-weight: 700; user-select: all; -webkit-user-select: all; }
.m-copy button { flex: none; min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--brand-secondary); color: var(--n-0); font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer; }
.m-sheet-x:focus-visible, .m-sheet-btn:focus-visible, .m-copy button:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }

/* 검증 모드(?src=survey)에서는 워크시트만 보여 주므로 탭바를 쓰지 않는다 */
.is-survey .m-tabbar { display: none !important; }
.is-survey body.has-tabbar { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .m-fold-btn::after { transition: none; }
  .m-sheet-box { animation: none; }
  .m-act:active { transform: none; }
}