/* DogEar 산책 성향 테스트 — 모바일 웹 전용
   흰 바탕 + 둥근 카드 + 브랜드색 하나(오렌지). 자녀 학습유형 테스트와 같은 결.
   누를 것은 모두 52px 이상, 노치·홈 바는 safe-area로 비켜 간다. 데스크톱은 가운데 폰 폭 기둥만. */
:root {
  /* 홈페이지(dogear-app/docs/site.css)와 같은 토큰 — 색을 따로 만들지 않는다.
     면: 오렌지 그라디언트 · 크림 · 피치 · 흰 카드.  차콜(#222)은 글자에만 쓴다(검정 면 없음).
     ⚠️ 오렌지 위 글자는 흰색이 아니라 차콜 — 흰 글씨는 2.1~3.3:1로 KWCAG 4.5:1 미달(홈페이지와 같은 규칙) */
  --orange: #FF7A30; --orange-1: #FF9B4D; --orange-2: #FF6A2D; --red: #FF4D2D; --orange-deep: #C2410C;
  --cream: #FFF6F0; --peach: #FFF0E6;
  --grad: linear-gradient(135deg, var(--orange-1) 0%, var(--orange-2) 58%, var(--red) 100%);
  --ink: #222222; --ink-soft: #5A5148; --ink-faint: #74665A; --line: #EFE7E0; --white: #FFFFFF;
  --sa-t: env(safe-area-inset-top, 0px); --sa-b: env(safe-area-inset-bottom, 0px);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { font-family: 'Apple SD Gothic Neo', 'Pretendard', 'Noto Sans KR', system-ui, sans-serif; color: var(--ink);
       background: #F4F1EE; line-height: 1.55; -webkit-font-smoothing: antialiased; word-break: keep-all; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
:where(a, button):focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 12px; }

.app { position: relative; max-width: 480px; height: 100dvh; margin: 0 auto; background: var(--white); overflow: hidden; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; }
.screen.on { display: flex; }

/* ── 머리줄: 가운데 제목, 양쪽 아이콘 ── */
.bar { flex: none; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
       padding: calc(var(--sa-t) + 4px) 6px 4px; min-height: calc(var(--sa-t) + 56px); border-bottom: 1px solid #F3EEEA; }
.bar-title { text-align: center; font-size: 16.5px; font-weight: 700; }
.bar-title.count { font-variant-numeric: tabular-nums; }
.brand { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; }   /* 로고 아이콘 → 서비스 소개(dogear.pet) */
.brand img { width: 30px; height: auto; display: block; }
.icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; justify-self: center; }
.icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-gap { width: 44px; }

.body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 18px 22px; }
.body.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.go-test { width: 100%; margin-top: 14px; }
.dock { flex: none; display: grid; gap: 10px; padding: 10px 16px calc(var(--sa-b) + 14px); }

/* ── 버튼 ── */
.btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 54px; border-radius: 14px;
       font-size: 16.5px; font-weight: 700; padding: 0 16px; }
/* 주 버튼: 브랜드 오렌지 단색 #FF7A30 + 흰 글씨. 그라디언트는 조잡해 보여 앱 배너에만 쓴다(2026-09-18 승일님).
   진한 #E85A12는 칙칙하고 배너와 따로 놀아서 뺐다.
   ⚠️ 흰 글씨 대비 2.6:1로 KWCAG 큰 글자 기준(3:1) 미달 — 색감을 우선한 절충 */
.btn.primary { background: var(--orange); color: #fff; font-size: 18px; letter-spacing: -.3px; }
.btn.primary:active { background: var(--orange-2); }
.btn.line { background: #fff; border: 1px solid #DED5CE; color: var(--ink); }
.btn.sq { width: 54px; padding: 0; flex: none; }
.btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 그림 자리(파일이 오기 전: 점선 + 파일명) ── */
.art { position: relative; width: 100%; overflow: hidden; }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art.ph { background: var(--cream); border: 2px dashed #F2C6A8; border-radius: 18px; display: grid; place-items: center; }
.art.ph::after { content: attr(data-asset); font: 600 12px/1.4 ui-monospace, Menlo, monospace; color: var(--orange-deep); opacity: .7; padding: 8px; text-align: center; word-break: break-all; }

/* ── 타이포 ── */
.pill { display: inline-block; font-size: 13.5px; font-weight: 700; color: var(--orange-deep); background: var(--peach); padding: 7px 14px; border-radius: 999px; }
.h1 { font-size: 30px; font-weight: 800; line-height: 1.3; letter-spacing: -.8px; white-space: pre-line; }
.h2 { font-size: 22px; font-weight: 800; line-height: 1.38; letter-spacing: -.5px; white-space: pre-line; }
.h3 { font-size: 19px; font-weight: 800; letter-spacing: -.3px; margin-top: 18px; }
.lead { margin-top: 12px; font-size: 15.5px; color: var(--ink-soft); white-space: pre-line; }
.lead b { color: var(--orange-deep); }
.lead.sm { margin-top: 6px; font-size: 14.5px; }

/* ── ① 시작 ── */
.intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.intro-logo { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 8px; }
.intro-logo img { height: 38px; width: auto; }
.art-intro { width: 100%; aspect-ratio: 3 / 2; margin: 18px auto 20px; border-radius: 22px; }

/* ── ② 시작 전에 ── */
.before { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.art-before { width: 100%; aspect-ratio: 3 / 2; margin-bottom: 18px; border-radius: 22px; }
.art[hidden] { display: none; }
.howto { width: 100%; margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.how { border: 1px solid var(--line); border-radius: 18px; padding: 18px 10px 16px; }
.how.yes { background: var(--cream); border-color: #F6D3BD; }
.how .mark { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; font-weight: 800; background: #EFEAE6; color: #8B7F75; }
.how.yes .mark { background: #fff; color: var(--orange); }
.how p { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.how b { font-size: 15px; color: var(--ink); }
.how.yes b { color: var(--orange-deep); }

/* ── ③ 문항 ── */
.progress { flex: none; height: 5px; margin: 14px 18px 0; background: #F3E6DC; border-radius: 99px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--orange); border-radius: 99px; transition: width .3s ease; }
.q { display: flex; flex-direction: column; align-items: center; padding-top: 14px; overflow: hidden; }
.ask { font-size: 15px; font-weight: 700; color: var(--ink-soft); text-align: center; }
.qno { font-size: 24px; font-weight: 900; color: var(--orange); letter-spacing: .5px; margin-top: 2px; }
.hint { flex: none; padding-top: 4px; padding-bottom: 12px; font-size: 13px; color: var(--ink-faint); }

/* 카드는 내용 높이만큼(그림 4:3 + 문장 + 버튼) — 화면에 꽉 채우면 문장 칸이 휑해진다. 남는 높이는 위아래로 나눠 가운데 */
.deck { position: relative; width: 100%; flex: none; margin: auto 0; padding-top: 12px; }
.card {
  position: relative; margin: 0 4px 6px; display: flex; flex-direction: column; background: #fff;
  border-radius: 26px; overflow: hidden; box-shadow: 0 18px 36px -18px rgba(90,40,10,.35), 0 1px 3px rgba(0,0,0,.05);
  touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform;
}
.card.next { position: absolute; top: 12px; left: 0; right: 0; transform: translateY(12px) scale(.95); opacity: .75; pointer-events: none; }
.card.fly { transition: transform .32s cubic-bezier(.2,.7,.3,1), opacity .32s; }
.card.snap { transition: transform .22s cubic-bezier(.2,.9,.3,1.2); }
.card .art { flex: none; aspect-ratio: 4 / 3; }   /* 3:2 장면을 좌우만 살짝(각 5%) 잘라 세로를 조금 더 쓴다 */
.card .art.ph { border-radius: 0; border-width: 0 0 2px 0; }
.card-foot { flex: none; padding: 20px 16px 18px; text-align: center; }
.card-text { font-size: 18px; font-weight: 700; line-height: 1.5; white-space: pre-line; letter-spacing: -.2px; }
.card-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cbtn { min-height: 52px; border-radius: 999px; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.cbtn.no { border: 1.5px solid #D9D0C9; color: var(--ink-soft); }
.cbtn.yes { background: var(--peach); border: 1.5px solid #F6C7A8; color: var(--orange-deep); }
/* 끌고 있을 때 어느 쪽으로 가는지 보여 주는 도장 */
.stamp { position: absolute; top: 18px; z-index: 2; padding: 6px 14px; border-radius: 12px; font-size: 18px; font-weight: 900;
         border: 3px solid; background: rgba(255,255,255,.9); opacity: 0; pointer-events: none; }
.stamp.no { left: 16px; color: #7B6F66; border-color: #7B6F66; transform: rotate(-10deg); }
.stamp.yes { right: 16px; color: var(--orange); border-color: var(--orange); transform: rotate(10deg); }

/* 키 작은 폰: 그림을 줄여 문장·버튼이 가리지 않게 */
@media (max-height: 700px) { .card-text { font-size: 16px; } .qno { font-size: 20px; } .hint { display: none; } }

/* ── ④ 분석 중 ── */
.art-loading { width: 100%; aspect-ratio: 3 / 2; border-radius: 22px; }
.dots { display: flex; gap: 8px; margin-top: 22px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); animation: hop .9s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hop { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-7px); } }

/* ── ⑤ 결과 ── */
.result { background: #fff; padding-bottom: calc(var(--sa-b) + 30px); }
.rcard { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 26px 18px 18px; text-align: center; box-shadow: 0 16px 34px -24px rgba(90,40,10,.35); }
.r-lead { font-size: 14px; color: var(--ink-faint); font-weight: 600; }
.r-name { margin-top: 4px; font-size: 26px; font-weight: 900; letter-spacing: -.7px; line-height: 1.3; }
.r-name .x { color: var(--orange); margin: 0 4px; }
.r-en { margin-top: 6px; display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: var(--orange-deep); background: var(--peach); padding: 5px 11px; border-radius: 999px; }
.r-en:empty { display: none; }
.art-r { width: 100%; aspect-ratio: 3 / 2; margin: 12px auto 0; border-radius: 18px; }
.r-sum { margin-top: 14px; background: var(--peach); border-radius: 18px; padding: 16px 14px; }
.r-sum p:first-child { font-size: 16px; font-weight: 700; line-height: 1.5; }
.tags { margin-top: 10px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.tags span { background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 700; color: var(--orange-deep); }
.r-mark { margin-top: 12px; font-size: 11.5px; font-weight: 700; color: #B8ABA0; letter-spacing: .3px; }

.actions { margin-top: 14px; display: flex; gap: 10px; }
.actions .btn.primary { flex: 1; }
.share-btn { font-size: 17px; padding: 0 12px; white-space: nowrap; }   /* 긴 이름이 360px 폭에서도 한 줄 */
.photo-hint { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; font-size: 13.5px; line-height: 1.5; color: var(--ink-faint); text-align: left; }
.photo-hint .ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.photo-hint svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 우리 아이 사진이 들어간 결과 카드 — 사진은 둥근 정사각, 유형 캐릭터는 오른쪽 아래 스티커 */
.art-wrap { position: relative; width: 100%; margin: 14px auto 0; }
.art-wrap .art-r { width: 100%; margin: 0; }
.photo-ctl { position: absolute; right: 8px; bottom: 8px; z-index: 3; }
.photo-ctl button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
                    background: rgba(255,255,255,.95); border: 1px solid var(--line); box-shadow: 0 6px 16px -8px rgba(60,30,10,.5); }
.photo-ctl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#r-art { cursor: pointer; }
.photo-del { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
             background: rgba(34,34,34,.55); color: #fff; }
.photo-del[hidden] { display: none; }
.photo-del::before { content: ''; position: absolute; inset: -6px; }   /* 누르는 영역 44px */
.photo-del svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.art-r.photo-mode { overflow: visible; }
.photo-frame { width: 100%; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 24px -14px rgba(90,40,10,.55); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.box { margin-top: 14px; background: #fff; border-radius: 22px; padding: 20px 18px; border: 1px solid var(--line); }
.box-h { font-size: 15.5px; font-weight: 800; color: var(--orange-deep); }
.box hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.list { list-style: none; margin-top: 8px; display: grid; gap: 5px; }
.list li { position: relative; padding-left: 14px; font-size: 15px; color: var(--ink-soft); }
.list li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 4px; height: 4px; border-radius: 50%; background: #C9BCB1; }
.try { margin-top: 10px; font-size: 15px; font-weight: 600; background: var(--cream); border-radius: 12px; padding: 12px 14px; }
.sub-row { display: block; width: 100%; text-align: left; }
.sub-body { margin-top: 12px; display: flex; align-items: center; gap: 14px; }
.sub-art { display: block; flex: none; width: 68px; height: 68px; border-radius: 16px; }
.sub-art.ph::after { font-size: 8px; }
.sub-tx { flex: 1; min-width: 0; }
.sub-name { display: block; font-size: 17px; font-weight: 800; }
.sub-sum { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-soft); line-height: 1.45; }

/* DogEar 앱 띠 — 홈페이지 ⑤ 설치 안내와 같은 오렌지 그라디언트. 글자는 차콜 */
/* 앱 설치 카드 — Play 그래픽 이미지(A_최종)의 모바일판. 배치·색 모두 스토어 그래픽과 같게(아이콘 타일 왼쪽, 워드마크·태그라인 오른쪽).
   카드 전체가 링크이고 접근 가능한 이름은 aria-label로 준다.
   ⚠️ 밝은 오렌지 위 흰 태그라인은 2.1~2.9:1로 큰 글자 기준(3:1)에 못 미친다 — 색감을 위해 승일님이 고른 절충(2026-09-18) */
.appcard { position: relative; overflow: hidden; margin-top: 14px; display: flex; align-items: center; gap: 16px; border-radius: 22px;
           padding: 22px 20px; background: linear-gradient(135deg, #FF9B4D 0%, #FF7A30 55%, #FF6A2D 100%); color: #fff; text-decoration: none;
           box-shadow: 0 14px 28px -18px rgba(230,90,20,.7); }
.ac-deco { position: absolute; pointer-events: none; }
.ac-tile { position: relative; flex: none; width: 76px; height: 76px; border-radius: 20px; background: #fff; display: grid; place-items: center;
           box-shadow: 0 10px 22px -10px rgba(160,50,0,.45); }
.ac-tile img { width: 54px; }
.ac-tx { position: relative; display: grid; gap: 8px; }
.ac-wm { width: 124px; height: auto; }
.ac-tag { font-size: 17px; font-weight: 800; line-height: 1.4; letter-spacing: -.4px; }
.appcard:active { filter: brightness(.97); }

.again { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.again.one { grid-template-columns: 1fr; margin-top: 10px; }
/* 좁은 칸이라 본문 버튼보다 글자를 줄인다 — 두 줄로 깨지지 않게 */
.again .btn { font-size: 15.5px; padding: 0 10px; }
.fine { margin-top: 16px; font-size: 12px; color: var(--ink-faint); text-align: center; line-height: 1.6; }

/* ── ⑥ 전체 유형: 세로 목록 ── */
.lead.left { text-align: left; margin-top: 0; }
.types { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.trow { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; background: #fff;
        border: 1px solid var(--line); border-radius: 20px; padding: 12px 14px 12px 12px; min-height: 92px; }
.trow:active { background: var(--cream); }
.trow .art { flex: none; width: 68px; height: 68px; border-radius: 16px; }
.trow .art.ph::after { font-size: 8px; }
.trow .tx { flex: 1; min-width: 0; }
.trow b { display: block; font-size: 16.5px; }
.trow small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.trow .chev, .chev { flex: none; font-size: 22px; color: #B7A99D; }

/* ── ⑦ 유형 상세 ── */
.detail .art-r { width: 100%; margin-top: 0; }
.detail .r-name { margin-top: 14px; }
.d-sum { margin-top: 10px; font-size: 16px; color: var(--ink-soft); }
.detail .tags { margin-top: 12px; }
.detail .tags span { background: var(--peach); }

/* 결과의 보조 성향 칸은 눌러서 그 유형 상세로 간다 */

/* 사진 크롭 — 앱 폭(480) 안에서 전체를 덮는다 */
.crop[hidden] { display: none; }
.crop { position: fixed; inset: 0; z-index: 40; background: #fff; display: flex; flex-direction: column; align-items: center;
        max-width: 480px; margin: 0 auto; padding: 0 16px calc(var(--sa-b) + 20px); }
.crop-top { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--sa-t) + 56px);
            padding-top: var(--sa-t); font-size: 17px; }
.crop-top button { min-height: 44px; padding: 0 6px; font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.crop-top .crop-ok { color: #E85A12; }
.crop-stage { width: 100%; margin-top: 12px; }
#crop-cv { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 24px; background: #F3EEEA; touch-action: none; cursor: grab; }
#crop-cv:active { cursor: grabbing; }
.crop-hint { margin-top: 14px; font-size: 14px; color: var(--ink-faint); }
.crop-zoom { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--ink-faint); font-size: 18px; }
.crop-zoom input { flex: 1; accent-color: #E85A12; height: 32px; }
.crop-sub { display: flex; gap: 8px; margin-top: auto; padding-top: 20px; }
.crop-sub button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 14.5px; font-weight: 700; color: var(--ink-soft); background: #fff; }
.toast { position: fixed; left: 50%; bottom: calc(var(--sa-b) + 96px); transform: translate(-50%, 16px); background: rgba(34,34,34,.92);
         color: #fff; font-size: 14.5px; font-weight: 600; padding: 11px 18px; border-radius: 12px; opacity: 0; pointer-events: none;
         transition: opacity .2s, transform .2s; max-width: calc(100vw - 40px); z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { .card.fly, .card.snap, .progress span { transition: none; } .dots i { animation: none; opacity: .8; } }

/* 전체 결과 이미지용 임시 틀 — 화면 밖(찍을 때만 잠깐 붙는다) */
.capture-wrap { position: fixed; left: -10000px; top: 0; background: #fff; padding: 18px; box-sizing: content-box; }