:root { --bg: #14121c; --card: #221e2e; --ink: #f1ecff; --dim: #a79fc0; --accent: #c9a2ff; --pink: #ff8fb8; --line: #2e2940; }
* { box-sizing: border-box; }
/* 폭스바니처럼 바깥은 어둡고 가운데 480px 기둥은 휴대폰 화면 판(2026-09-27 사용자: 넓은 화면에서 카드가 허공에서 잘린다) */
html { background: #09080d; }
body::before { content: ""; position: fixed; top: 0; bottom: 0; left: 50%; width: min(480px, 100%); transform: translateX(-50%);
  background: var(--bg); box-shadow: 0 0 0 1px #1f1b2b, 0 0 60px rgba(0,0,0,.6); z-index: -1; }
body { margin: 0; background: transparent; position: relative; z-index: 0; color: var(--ink); font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; line-height: 1.7; }
a { color: var(--accent); }
.top { display: flex; justify-content: space-between; align-items: center; max-width: 464px; margin: 8px auto 0; padding: 8px 14px 8px 18px;
  border: 1px solid var(--line); border-radius: 16px; background: #1b1826; position: sticky; top: 8px; z-index: 11; width: calc(100% - 16px); }
.logo { font-weight: 700; text-decoration: none; }
/* 소리 켜기/끄기(5회차) — 기본 꺼짐(🔇). 켜지면 테두리가 밝아진다 */
.sound { flex: 0 0 auto; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-size: 1.1rem; line-height: 1.4; cursor: pointer; }
.sound[aria-pressed="true"] { border-color: var(--accent); background: rgba(201,162,255,.14); }
.sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 폭스바니처럼 넓은 화면에서도 가운데 480px 휴대폰 기둥 하나(2026-09-27 사용자: 카드 그림이 잘린다) */
.wrap { max-width: 480px; margin: 0 auto; padding: 24px 18px 60px; }
.q { font-size: 1.5rem; margin: 12px 0 20px; }

/* 공지 띠 — 가로로 넘기는 두 장 */
.notice { margin: 0 0 18px; }
.notice-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 8px; }
.notice-track::-webkit-scrollbar { display: none; }
.notice-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }  /* 키보드로 잡아 화살표로 넘긴다(검수 2026-09-27) */
.notice-item { flex: 0 0 100%; scroll-snap-align: start; margin: 0; padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(120deg, #4a2a6e, #7a3b8f); color: #fff; font-size: .95rem; font-weight: 600; }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.dots span.on { background: var(--accent); }

/* 카드 캐러셀 — 옆 카드가 살짝 보인다 */
.carousel { margin: 0 -18px; }
.track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 18px 8px; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.card { position: relative; flex: 0 0 calc(100% - 44px); scroll-snap-align: center; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 4px; aspect-ratio: 4 / 5; padding: 0 18px 18px; border-radius: 18px; background: var(--card);
  text-decoration: none; color: var(--ink); overflow: hidden; isolation: isolate; }
.card[hidden] { display: none; }   /* .card{display:flex} 가 브라우저 기본 [hidden] 을 이기므로 명시(검수 2026-09-27) */
.card .portrait { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,8,16,0) 38%, rgba(10,8,16,.55) 62%, rgba(10,8,16,.94) 100%); }
.card .emoji { position: absolute; inset: 0; z-index: -2; display: flex; align-items: center; justify-content: center; font-size: 4rem; padding-bottom: 30%; }
.card .counter { position: absolute; top: 12px; right: 12px; font-size: .75rem; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; }
.card .chip { display: inline-block; align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--pink); color: #2a1020; font-size: .8rem; font-weight: 700; }
.card .ask { font-size: 1.45rem; font-weight: 800; line-height: 1.35; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.card .hook { color: #ddd6ee; font-size: .9rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .go { margin-top: 6px; color: var(--pink); font-weight: 700; }

/* 필터 칩 + 주제 목록 */
.chips { display: flex; gap: 8px; margin: 22px 0 10px; overflow-x: auto; scrollbar-width: none; }
.chip-btn { flex: 0 0 auto; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--dim); font-size: .9rem; cursor: pointer; }
.chip-btn.on { background: var(--accent); border-color: var(--accent); color: #1a1426; font-weight: 700; }
.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-list li[hidden] { display: none; }
.topic-list a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; margin-bottom: 10px; border-radius: 14px; background: var(--card); text-decoration: none; color: var(--ink); }
.t-title { font-weight: 700; }
.t-hook { color: var(--dim); font-size: .88rem; }
.t-go { color: var(--pink); font-size: .9rem; font-weight: 700; margin-top: 4px; }

/* 입력 화면 머리 — 인물화 전면 + 후킹 + 실제 통계 */
.hero { position: relative; margin: -24px -18px 18px; overflow: hidden; background: var(--card); }
.hero-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  transform-origin: 50% 30%; animation: hero-zoom 16s ease-in-out infinite alternate; }
/* 인물 움직임 — 영상 대신 CSS 만: 은은한 확대(위) + 흐르는 연기(::before) + 숨 쉬는 빛(::after). 움직임 줄이기 설정이면 전부 끈다 */
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero::before { background:
    radial-gradient(60% 40% at 20% 80%, rgba(201,162,255,.28), transparent 70%),
    radial-gradient(50% 35% at 80% 65%, rgba(255,143,184,.18), transparent 70%);
  mix-blend-mode: screen; filter: blur(18px); animation: hero-mist 11s ease-in-out infinite alternate; }
@keyframes hero-mist { from { transform: translate3d(-4%, 2%, 0) scale(1); opacity: .7; } to { transform: translate3d(4%, -3%, 0) scale(1.15); opacity: 1; } }
.hero::after { background: radial-gradient(45% 35% at 50% 28%, rgba(255,240,220,.22), transparent 70%);
  mix-blend-mode: screen; animation: hero-glow 5s ease-in-out infinite alternate; }
@keyframes hero-glow { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-img, .hero::before, .hero::after { animation: none; } }
.hero-emoji { font-size: 5rem; text-align: center; margin: 0; padding: 60px 0 20px; }
.hero-text { position: relative; padding: 16px 18px 18px; background: linear-gradient(180deg, rgba(20,18,28,0) 0%, var(--bg) 40%); }
.hero-img + .hero-text { margin-top: -120px; }
.hero .chip { display: inline-block; margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--pink); color: #2a1020; font-size: .8rem; font-weight: 700; }
.hero .q { margin: 8px 0 6px; }
.hero .hook { margin: 0 0 8px; color: var(--dim); }
.hero .seen { margin: 0 0 4px; font-size: .9rem; color: var(--pink); font-weight: 700; }
.hero .free { margin: 0 0 12px; font-size: .85rem; color: var(--dim); }
.cta.enter { display: block; text-align: center; text-decoration: none; }
.portrait.head { display: block; width: 160px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; margin: 0 auto 10px; }
.who { color: var(--dim); font-size: .9rem; }
.who.big { font-size: 1rem; margin: 0; }
fieldset { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 14px; padding: 12px 14px; }
label { display: block; margin: 6px 0; }
.inline { display: inline-block; margin-right: 14px; }
input[type=date], input[type=time] { background: var(--card); color: var(--ink); border: 1px solid #3a3450; border-radius: 8px; padding: 6px 8px; }
.note { color: var(--dim); font-size: .85rem; }
.cta { width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--accent); color: #1a1426; font-weight: 700; font-size: 1rem; cursor: pointer; }
.cta:disabled { opacity: .6; }
.loading { text-align: center; padding: 60px 0; }
/* 기다리는 화면 — 캐릭터가 숨 쉬듯 떠오르고 대사가 바뀐다 */
.wait { padding: 30px 0; }
.wait-img { display: block; width: 200px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; margin: 0 auto 14px;
  box-shadow: 0 0 40px rgba(201,162,255,.35); animation: breathe 3s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: translateY(0) scale(1); box-shadow: 0 0 30px rgba(201,162,255,.25); } to { transform: translateY(-6px) scale(1.02); box-shadow: 0 0 60px rgba(201,162,255,.55); } }
.wait .msg { min-height: 1.7em; font-weight: 700; color: var(--accent); transition: opacity .4s; }
.wait .msg.fade { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .wait-img { animation: none; } .wait .msg { transition: none; } }
.spin { font-size: 2.4rem; animation: spin 2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.chapter { background: var(--card); border-radius: 14px; padding: 16px 18px; margin: 14px 0; }
.chapter h2 { font-size: 1.1rem; }
/* 대화형 결과 — 캐릭터 말풍선. JS 가 하나씩 보여 주고, 없으면 전부 보인다 */
.chat .bubble { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.chat .bubble[hidden] { display: none; }
.chat .bubble::before { content: "🗨️"; flex: 0 0 auto; font-size: 1.1rem; line-height: 1.5; }
.chat .bubble p { min-width: 0; margin: 0; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: #2b2540; overflow-wrap: anywhere; }  /* 손님이 넣은 공백 없는 긴 글(주소·영문)이 375px 에서 넘치지 않게(검수 2026-09-27) */
.chat .bubble.intro p, .chat .bubble.tail p { background: #3a2e55; color: #e8dcff; }
.chat .bubble.typing p::after { content: "▍"; color: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }
.chat .next { display: block; width: 100%; margin-top: 12px; padding: 10px; border: 0; border-radius: 10px; background: var(--pink); color: #2a1020; font-weight: 700; cursor: pointer; }
.after[hidden] { display: none; }
/* 이어서 묻기(3회차) — 손님 말풍선은 오른쪽, 폼은 대화 끝에 */
.chat .bubble.mine { flex-direction: row-reverse; }
.chat .bubble.mine::before { content: "🙂"; }
.chat .bubble.mine p { background: #4a2a4a; color: #ffe3ef; border-radius: 16px 4px 16px 16px; }
.chat .ask { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.chat .ask[hidden] { display: none; }
.ask-label { display: block; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.ask-row { display: flex; gap: 8px; }
.ask-row input { flex: 1 1 auto; min-width: 0; background: var(--bg); color: var(--ink); border: 1px solid #3a3450; border-radius: 10px; padding: 10px 12px; font-size: 1rem; }
.ask-go { flex: 0 0 auto; padding: 10px 16px; border: 0; border-radius: 10px; background: var(--pink); color: #2a1020; font-weight: 700; cursor: pointer; }
.ask-go:disabled, .ask-row input:disabled { opacity: .6; }
.chat .asked { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .chat .bubble.typing p::after { animation: none; } }
.locked .blur { filter: blur(4px); user-select: none; }
.soon { text-align: center; color: var(--accent); }
.err { color: #ff9a9a; }
.stats { width: 100%; border-collapse: collapse; font-size: .9rem; }
.stats th, .stats td { border-bottom: 1px solid var(--line); padding: 6px; text-align: left; }
.foot { max-width: 480px; margin: 0 auto; padding: 20px 18px 90px; color: var(--dim); font-size: .8rem; }
/* 아래 고정 탭 바 */
.tabbar { position: fixed; left: 0; right: 0; bottom: 10px; width: calc(min(480px, 100%) - 20px); margin: 0 auto; border-radius: 20px; border: 1px solid var(--line); overflow: hidden; display: flex; justify-content: space-around; padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  background: #1b1826; border-top: 1px solid var(--line); z-index: 10; }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; color: var(--dim); text-decoration: none; min-width: 64px; }
.tabbar a span { font-size: 1.2rem; }
/* 내 풀이 · FAQ */
.mine-item { background: var(--card); border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.mine-item h2 { font-size: 1rem; margin: 0 0 4px; }
.mine-item .when { color: var(--dim); font-size: .8rem; margin: 0 0 8px; }
.mine-item p { margin: 6px 0; }
.mine-item details summary { cursor: pointer; color: var(--accent); }
.faq dt { font-weight: 700; margin-top: 16px; }
.faq dd { margin: 4px 0 0; color: var(--dim); }
.biz { font-size: .75rem; opacity: .8; }

/* 화면에는 안 보이고 스크린리더만 읽는다(결과 화면 말풍선 알림) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 카드 넘김 화살표 — 마우스가 있는 넓은 화면에서만(폭스바니처럼) */
.carousel { position: relative; }
.carousel .nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .carousel .nav { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px;
    margin-top: -18px; border: 0; border-radius: 50%; background: rgba(10,8,16,.7); color: #fff; font-size: 1.1rem; cursor: pointer; }
  .carousel .nav.prev { left: 24px; }
  .carousel .nav.next { right: 24px; }
  .carousel .nav[disabled] { opacity: .25; cursor: default; }
}

/* 좁은 화면과 큰 글자에서도 고정 메뉴가 마지막 콘텐츠를 가리지 않도록 여백 확보 */
html { scroll-padding-top:88px; scroll-padding-bottom:120px; }
.foot { padding-bottom:calc(120px + env(safe-area-inset-bottom)); }
.sound,.tabbar a { min-height:44px; justify-content:center; }
.carousel .nav { min-width:44px; min-height:44px; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
input,textarea,select { scroll-margin-block:100px; max-width:100%; }
.wrap { overflow-wrap:anywhere; }
@media(max-width:600px) {
  body:has(form input:not([type=hidden]):not([type=radio]):not([type=checkbox]):focus) .tabbar,
  body:has(textarea:focus) .tabbar { display:none; }
  input,textarea,select { font-size:max(16px,1rem); }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

button,input,select,textarea { font-family:inherit; }
h1,h2,.logo { font-weight:800; letter-spacing:-.035em; }

/* 소리가 막힌 말풍선의 듣기 버튼(아이폰 첫 인사, 2026-10-05) */
.chat .bubble .listen { margin: 6px 0 0 8px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }

/* 보관함: 지난 오늘의·이달의 운세에서 새 운세로 · 이어 읽기로 돌아간 문단 잠깐 밝히기(10-28 회의) */
.mine-fresh { display:inline-block; margin:2px 0 6px; font-weight:600; }
@keyframes resume-flash { from { background:rgba(201,162,255,.28); } to { background:transparent; } }
.reading-section.resume-flash { animation:resume-flash 2.4s ease-out; border-radius:10px; }
@media (prefers-reduced-motion:reduce) { .reading-section.resume-flash { animation:none; outline:2px solid rgba(201,162,255,.6); } }