/* 우리 강아지의 행복 버튼은? — 화면
 * 색·글꼴·최대 폭은 산책 테스트(../style.css)와 같은 브랜드 값을 쓴다.
 * 다만 고정 높이·강제 크롭·대비가 모자란 조합은 가져오지 않았다.
 * 이 테스트는 답이 네 개라 카드 대신 목록형 선택지를 쓴다.
 */
:root {
  --orange: #FF7A30; --orange-1: #FF9B4D; --orange-2: #FF6A2D; --red: #FF4D2D; --orange-deep: #C2410C;
  --cream: #FFF6F0; --peach: #FFF0E6;
  --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: #F6F2EF; line-height: 1.5; letter-spacing: -.2px; -webkit-font-smoothing: antialiased;
       word-break: keep-all; overflow-wrap: break-word; }   /* 한글이 단어 중간에서 끊기지 않게 */
button, input { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { cursor: text; }
a { color: inherit; text-decoration: none; }
:where(a, button, input):focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 12px; }
[hidden] { display: none !important; }

.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: 44px 1fr 44px; 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: 16px; font-weight: 800; }
.bar-title.count { font-variant-numeric: tabular-nums; }
.icon { display: grid; place-items: center; width: 44px; height: 44px; }
.icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.ghost { pointer-events: none; }
.brand { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; }
.brand img { width: 30px; height: auto; display: block; }

.body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 18px 22px; }
/* 스크롤바가 오른쪽 여백을 더 밀어낸다 — 폰에서는 겹쳐 뜨므로 자리를 비운다 */
.body { scrollbar-width: none; }
.body::-webkit-scrollbar { width: 0; height: 0; }
.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; }
.btn.primary { background: var(--orange); color: #fff; font-size: 18px; letter-spacing: -.3px; }
.btn.primary:active { background: var(--orange-2); }
.btn.primary[disabled] { background: #E8DFD8; color: #9C8F84; cursor: default; }
.btn.line { border: 1.5px solid var(--line); background: #fff; }
.btn.line:active { background: var(--cream); }
.btn.sq { width: 54px; flex: none; padding: 0; }
.btn.sq svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.wide { width: 100%; margin-top: 18px; }

/* ── 타이포 ── */
.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; text-wrap: balance; }
.h2 { font-size: 22px; font-weight: 800; line-height: 1.38; letter-spacing: -.5px; }
.lead { margin-top: 12px; font-size: 15.5px; color: var(--ink-soft); }
.lead.left { text-align: left; }
.note { margin-top: 10px; font-size: 13px; color: var(--ink-faint); line-height: 1.5; }
.fine { margin-top: 16px; font-size: 12.5px; color: var(--ink-faint); text-align: center; line-height: 1.6; }

/* ── 그림 자리: 파일이 있으면 그림, 없으면 점선 + 파일명 ── */
.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; }
.art-intro { aspect-ratio: 3 / 2; margin: 18px auto 20px; border-radius: 22px; }
.art-q { aspect-ratio: 3 / 2; margin: 14px auto 0; border-radius: 18px; }
.art-r { aspect-ratio: 3 / 2; border-radius: 18px; }

/* ── ① 시작 ── */
.intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.guide { margin-top: 18px; width: 100%; background: var(--cream); border-radius: 18px; padding: 16px 16px; text-align: left; }
.guide-h { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.55; }
.guide-p { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.intro-logo { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 8px; }
.intro-logo img { height: 38px; width: auto; }

/* ── ② 질문 ── */
.progress { flex: none; height: 5px; margin: 10px 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 .25s ease; }
.q-title { font-size: 20px; font-weight: 800; line-height: 1.4; letter-spacing: -.4px; }
.q-hint { margin-top: 12px; font-size: 13.5px; color: var(--ink-faint); background: var(--cream); border-radius: 12px; padding: 10px 12px; }

/* 선택지 — 눌러도 바로 넘어가지 않는다. 고른 뒤 '다음'을 눌러야 이동한다(수정이 쉽게) */
.opts { margin-top: 16px; display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 14px 16px; text-align: left;
       border: 1.5px solid var(--line); border-radius: 16px; background: #fff; font-size: 16px; line-height: 1.45; }
.opt .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #D9D0C9; display: grid; place-items: center; }
.opt .dot::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: transparent; }
.opt[aria-checked="true"] { border-color: var(--orange); background: var(--peach); font-weight: 700; }
.opt[aria-checked="true"] .dot { border-color: var(--orange); }
.opt[aria-checked="true"] .dot::after { background: var(--orange); }
.opt.neutral { font-size: 15px; color: var(--ink-soft); min-height: 54px; }
.opt.neutral small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); font-weight: 400; }

/* ── 질문: A/B 카드 두 장(위아래). 카드마다 그림이 들어간다 ── */
.q { display: flex; flex-direction: column; }
/* 막 이름 — 지금이 하루의 어느 대목인지 */
.act-name { text-align: center; font-size: 13px; font-weight: 800; color: var(--orange-deep); letter-spacing: .3px; }
.q-title { margin-top: 6px; font-size: 19px; font-weight: 800; line-height: 1.45; letter-spacing: -.4px; text-align: center;
            text-wrap: balance; }                         /* 두 줄이 되면 길이를 비슷하게 나눈다 */
/* 아주 좁은 폭(320 등)에서도 '상황 / 질문' 두 줄을 지킨다 */
@media (max-width: 340px) { .q-title { font-size: 17.5px; } }
/* 메인 카피는 한 줄로 둔다 — 좁은 폭에서는 글자를 줄여서라도 */
@media (max-width: 374px) { .lead-1 { font-size: 15.5px; } }
@media (max-width: 340px) { .lead-1 { font-size: 14px; } }
.picks { margin: 16px 0 8px; display: grid; gap: 12px; }
.pick-card { display: block; width: 100%; padding: 0; overflow: hidden;
             border: 1.5px solid var(--line); border-radius: 20px; background: #fff; text-align: left;
             box-shadow: 0 12px 24px -20px rgba(90,40,10,.55); }
/* 설명 줄 — 그림 위. 배지와 글을 한 줄에 둔다 */
.pick-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.pick-art { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 0; }
/* A·B 표시 — 두 카드 중 하나를 고르는 보기라는 것이 한눈에 보이게 */
.pick-badge { flex: none; width: auto; min-width: 14px; color: var(--orange-deep);
              font-size: 15px; font-weight: 900; letter-spacing: 0; }

.pick-art.ph { border-radius: 0; border-width: 0 0 2px 0; }
.pick-tx { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }
.pick-card:active { background: var(--cream); }
.pick-card[aria-pressed="true"] { border-color: var(--orange); }
.pick-card[aria-pressed="true"] .pick-tx { font-weight: 700; color: var(--orange-deep); }
/* 작은 폰에서도 A·B 두 장이 한 화면에 들어와야 한다.
   그림을 3:2에서 16:9로 낮춰 카드당 30px가량을 줄인다(위아래가 조금 잘리므로 주인공은 가운데에). */
@media (max-height: 740px) {
  .q.body { padding-top: 12px; }
  .act-name { font-size: 12px; }
  .q-title { font-size: 17.5px; margin-top: 4px; }
  .pick-tx { font-size: 14.5px; }
  .pick-head { padding: 9px 12px; gap: 8px; }
  .pick-badge { font-size: 14px; }
  .pick-art { aspect-ratio: 16 / 9; }
  .picks { margin: 10px 0 4px; gap: 8px; }
  .pick-card { border-radius: 16px; }
}

/* ── ④ 결과 ── */
.result { background: #fff; padding-bottom: calc(var(--sa-b) + 30px); }
.rcard { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 24px 18px 18px; text-align: center;
         box-shadow: 0 16px 34px -24px rgba(90,40,10,.35); }
.r-kicker { font-size: 13.5px; color: var(--ink-faint); font-weight: 600; line-height: 1.5; text-wrap: balance; }
.r-name { margin-top: 6px; font-size: 26px; font-weight: 900; letter-spacing: -.7px; line-height: 1.3; text-wrap: balance; }
.r-name .x { color: var(--orange); margin: 0 4px; }
.r-quote { margin-top: 8px; font-size: 15.5px; font-weight: 700; color: var(--orange-deep); }
.art-wrap { position: relative; width: 100%; margin: 14px auto 0; }
.photo-ctl { position: absolute; right: 8px; bottom: 8px; z-index: 3; 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-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; }
.photo-ctl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#r-art { cursor: pointer; }
/* 사진은 잘라내지 않고 전부 보이게 담는다(강제 크롭 없음) */
.art.photo { background: var(--cream); display: block; }
.r-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.r-tags span { white-space: nowrap; background: var(--peach); color: var(--orange-deep); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 700; }
.r-mark { margin-top: 14px; word-break: break-all; font-size: 11.5px; font-weight: 700; color: #B8ABA0; letter-spacing: .3px; }

.photo-hint { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;
              font-size: 13.5px; color: var(--ink-faint); }
.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; }
.actions { margin-top: 14px; display: flex; gap: 10px; }
.actions .btn.primary { flex: 1; }
.share-btn { font-size: 17px; padding: 0 12px; white-space: nowrap; }

.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-p { margin-top: 8px; font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
.box-p.small { font-size: 13.5px; }
.box-p.big { font-size: 16px; color: var(--ink); line-height: 1.65; }
/* 유형 설명 — 이 버튼이 무엇인지. 읽을거리의 첫 블록이라 크림색으로 한 겹 세워 둔다.
   앞의 짧은 장면 한 줄을 키우고, 뒤의 정의 문장을 받쳐 둔다. */
.lead-in { margin: -2px 0 20px; padding: 19px 17px; border-radius: 18px;
           background: var(--cream); border: 1px solid #F3E3D7; }
.lead-1 { font-size: 17px; font-weight: 800; line-height: 1.45; letter-spacing: -.5px; color: var(--ink); }
/* 메인 카피는 주황 쌍따옴표로 감싼다.
   여는 따옴표는 왼쪽 밖으로 내걸어(text-indent) 본문 줄머리가 가지런히 떨어지게 한다.
   line-height 0 으로 두어 큰 글자가 줄간격을 밀지 않게 한다. */
/* 한 줄이라 따옴표를 글줄 안에 두고 통째로 가운데 정렬한다 */
.lead-1 { text-align: center; }
.lead-1::before, .lead-1::after { color: var(--orange); font-weight: 900; font-size: 1.5em; line-height: 0; vertical-align: -.2em; }
.lead-1::before { content: '\201C'; margin-right: .06em; }
.lead-1::after { content: '\201D'; margin-left: .06em; }
.lead-2 { margin-top: 9px; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.d-desc { margin-bottom: 4px; }
.d-desc .lead-1 { font-size: 17px; }
.box-p.care { margin-top: 10px; color: var(--ink-faint); font-size: 14px; }
.box hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.action-title { margin-top: 8px; font-size: 16.5px; font-weight: 800; }
.list { margin-top: 10px; display: grid; gap: 5px; list-style: none; }
.list li { position: relative; padding-left: 14px; font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
.list li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #E0B79B; }

/* 공동 결과 후보 — 순위처럼 보이지 않게 모두 같은 크기 */
.chips.pick { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips.pick button { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 14px; font-size: 14.5px; font-weight: 700; }
.chips.pick button[aria-pressed="true"] { border-color: var(--orange); background: var(--peach); color: var(--orange-deep); }

/* ── 오늘 하루 기록 ── 고른 다섯 선택이 세로로 쌓인다 */
.r-box .timeline { margin-top: 13px; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 10px; }
.tl-cell { display: grid; gap: 3px; min-width: 0; }
.tl-thumb { width: 100%; aspect-ratio: 3 / 2; height: auto; border-radius: 14px; }
.tl-thumb.ph::after { font-size: 7px; }
.tl-cell b { margin-top: 4px; font-size: 12px; font-weight: 800; color: var(--orange-deep); }
.tl-cell span:last-child { font-size: 14px; line-height: 1.4; color: var(--ink); }


/* 목록 행(6가지 보기) */
.rows { margin-top: 12px; display: grid; gap: 10px; list-style: none; }
.row { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; background: #fff;
       border: 1px solid var(--line); border-radius: 18px; padding: 12px; }
.row:active { background: var(--cream); }
.row .art { flex: none; width: 68px; height: 68px; border-radius: 16px; }
.row .art.ph::after { font-size: 8px; }
.row .tx { flex: 1; min-width: 0; }
.row b { display: block; font-size: 16.5px; }
.row small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.row .chev { flex: none; font-size: 22px; color: #B7A99D; }

.again { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 좁은 칸이라 본문 버튼보다 글자를 줄이고 좌우 여백을 좁힌다 — 두 줄로 깨지지 않게 */
.again .btn { font-size: 15.5px; padding: 0 10px; }
.again.one { grid-template-columns: 1fr; margin-top: 10px; }
.detail .r-name, .detail .r-quote, .detail .r-tags { text-align: center; }
.detail .r-name { margin-top: 14px; }

/* DogEar 앱 배너 — 산책 테스트와 같은 모양 */
.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;
           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; }

/* ── 사진 맞추기 ── */
.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: var(--orange-deep); }
.crop-stage { width: 100%; margin-top: 12px; }
#crop-cv { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 22px; 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: var(--orange); 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; }

/* ── 결과 이미지(화면 밖에서 찍는다) — 카드 + 내용 박스를 붙여 한 장으로 ── */
.capture-wrap { position: fixed; left: -10000px; top: 0; background: #fff; padding: 18px; box-sizing: content-box; }

/* ── 토스트·오류 ── */
.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: 14px; padding: 12px 18px; border-radius: 14px; opacity: 0; pointer-events: none;
         transition: opacity .2s, transform .2s; max-width: calc(100vw - 40px); z-index: 50; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.fail { position: fixed; inset: 0; z-index: 60; background: #fff; display: grid; place-content: center; gap: 12px; text-align: center; padding: 24px; }