/* ============ WellFit — 라인아트 리포트 무드 ============ */
:root {
  --cream: #FFFBF0;          /* 산뜻한 아이보리 */
  --paper: #FFFFFF;
  --ink: #26302F;
  --ink-soft: #5E6B6A;
  --sage: #17A2A6;           /* 쨍한 틸 */
  --sage-deep: #0E7C80;
  --terra: #FF6B4A;          /* 쨍한 코랄 */
  --terra-soft: #FFD1C4;
  --sunny: #FFC533;          /* 쨍한 옐로 */
  --line: #EAE4D6;
  --radius: 18px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }
body {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.65;
  letter-spacing: -0.01em;
}
h1, h2, h3, .serif {
  font-family: inherit;   /* 카툰 스타일에 맞춰 볼드 산세리프 */
  font-weight: 800;
  letter-spacing: -0.03em;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; }

/* ---------- 화면 전환 ---------- */
.screen { display: none; min-height: 100vh; min-height: 100dvh; padding: 24px 22px calc(32px + env(safe-area-inset-bottom)); animation: fadeIn .45s ease; }
.screen.active { display: flex; flex-direction: column; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 홈 ---------- */
.home-hero { text-align: center; padding-top: 7vh; flex: 1; }
.home-hero img { width: min(78%, 320px); border-radius: var(--radius); margin-bottom: 18px; }
.brand-eyebrow { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sage); margin-bottom: 6px; }
.brand-title { font-size: 3.1rem; line-height: 1.1; color: var(--ink); }
.brand-dot { color: var(--terra); }
.brand-sub { font-size: 1.12rem; color: var(--sage-deep); margin-top: 6px; font-weight: 600; }
.brand-desc { font-size: .92rem; color: var(--ink-soft); margin-top: 16px; }
.home-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.btn {
  border: none; cursor: pointer; width: 100%;
  padding: 17px 20px; border-radius: var(--radius);
  font-size: 1.05rem; font-weight: 700; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: scale(.98); }
.btn small { font-weight: 400; font-size: .78rem; opacity: .75; }
.btn-primary { background: var(--sage-deep); color: #fff; box-shadow: 0 6px 18px rgba(14,124,128,.3); }
.btn-second { background: #FFF3D6; color: #8A6D1F; border: 1.5px solid #F2DCA0; }
.btn-ghost { background: var(--paper); color: var(--sage-deep); border: 1.5px solid var(--line); }
.btn-badge { font-size: .68rem; background: var(--terra); color: #fff; border-radius: 999px; padding: 2px 10px; margin-bottom: 4px; font-weight: 700; }
.en-tag { font-size: .66rem; letter-spacing: .16em; font-weight: 700; opacity: .8; margin: 2px 0; }
.home-note { font-size: .82rem; color: var(--ink-soft); text-align: center; margin-top: 16px; line-height: 1.6; }
.home-note b { color: var(--sage-deep); }
.next-banner { background: #FFF7E0; border: 1.5px solid #F2DCA0; border-radius: var(--radius); padding: 20px 18px; margin: 4px 0 14px; text-align: center; }
.next-banner.done { background: #E8F6F0; border-color: #BFE3D4; }
.next-banner p { font-size: .98rem; line-height: 1.65; margin-bottom: 14px; }
.next-banner b { color: var(--terra); }
.next-banner.done p { font-size: 1.05rem; font-weight: 700; }
.banner-actions { display: flex; flex-direction: column; gap: 8px; }
.banner-actions .btn { padding: 13px; font-size: .96rem; }
.disclaimer { font-size: .72rem; color: #A79E93; text-align: center; margin-top: 26px; }
.credit { font-size: .72rem; color: #B8AFA3; text-align: center; margin-top: 14px; }

/* 참고문헌 */
.refs { background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-top: 18px; }
.refs summary { font-size: .85rem; font-weight: 700; color: var(--sage-deep); cursor: pointer; }
.refs ul { list-style: none; margin-top: 12px; }
.refs li { font-size: .76rem; color: var(--ink-soft); line-height: 1.6; padding-left: 14px; position: relative; margin-bottom: 7px; }
.refs li::before { content: '·'; position: absolute; left: 2px; color: var(--terra); font-weight: 700; }
.refs-note { font-size: .74rem; color: #A79E93; margin-top: 10px; }

/* ---------- 검사 ---------- */
.test-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8vh; }
.btn-back { background: none; border: none; font-size: 1.4rem; color: var(--ink-soft); cursor: pointer; padding: 4px 8px; }
.progress-track { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--sage), var(--terra)); border-radius: 3px; transition: width .35s ease; }
.progress-label { font-size: .8rem; color: var(--ink-soft); min-width: 44px; text-align: right; }
.test-body { flex: 1; display: flex; flex-direction: column; }
.q-part { font-size: .78rem; letter-spacing: .14em; color: var(--terra); font-weight: 700; margin-bottom: 14px; }
.q-text { font-size: 1.28rem; font-weight: 700; line-height: 1.55; min-height: 5.2em; }
.q-options { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.q-opt {
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 15px 18px; font-size: .98rem; font-family: inherit; color: var(--ink);
  cursor: pointer; text-align: left; transition: border-color .15s, background .15s;
}
.q-opt:active, .q-opt.picked { border-color: var(--sage); background: #EFF3EE; }

/* ---------- 결과: 반전 카드 ---------- */
.reveal-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0; }
.reveal-msg { color: var(--ink-soft); font-size: .95rem; margin-bottom: 18px; }
.flip-card { width: min(88vw, 360px); height: 460px; perspective: 1200px; -webkit-perspective: 1200px; cursor: pointer; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1), -webkit-transform .9s cubic-bezier(.2,.7,.2,1); }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px; border: 1.5px solid var(--line);
}
.flip-front { background: var(--paper); }
.flip-front .four-letters { font-size: 3.4rem; letter-spacing: .08em; color: var(--ink); }
.flip-front .fake-label { color: var(--ink-soft); font-size: .9rem; margin-top: 10px; }
.flip-front .tap-hint { position: absolute; bottom: 22px; font-size: .8rem; color: var(--terra); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.flip-back { background: linear-gradient(160deg, #F2F0E9, var(--paper)); transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.flip-back img { width: 72%; border-radius: 16px; margin-bottom: 14px; }
.flip-back .type-code { font-size: .85rem; letter-spacing: .18em; color: var(--terra); font-weight: 700; }
.flip-back .type-nick { font-size: 1.5rem; margin-top: 4px; }
.flip-back .type-tag { font-size: .88rem; color: var(--ink-soft); margin-top: 8px; }

/* ---------- 결과: 리포트 본문 ---------- */
.report { animation: fadeIn .5s ease; }
.report-section { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 22px 20px; margin-bottom: 14px; }
.report-section h3 { font-size: 1.02rem; color: var(--sage-deep); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.report-section h3 .no { color: var(--terra); font-size: .8rem; letter-spacing: .1em; }
.report-hero { text-align: center; padding: 28px 20px; }
.report-hero img { width: min(70%, 260px); border-radius: 16px; margin-bottom: 12px; }
.report-hero .type-code { letter-spacing: .2em; color: var(--terra); font-weight: 700; font-size: .9rem; }
.report-hero h2 { font-size: 1.7rem; margin-top: 4px; }
.report-hero .type-tag { color: var(--terra); font-size: .92rem; margin-top: 8px; font-weight: 600; }
.report-hero .type-summary { color: var(--ink-soft); font-size: .92rem; margin-top: 12px; text-align: left; background: #FFF7E0; border-radius: 12px; padding: 13px 15px; }
ul.plain { list-style: none; }
ul.plain li { padding-left: 22px; position: relative; margin-bottom: 9px; font-size: .95rem; }
ul.plain li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--terra-soft); }
.field-chip { display: inline-block; background: #EFF3EE; color: var(--sage-deep); border-radius: 999px; padding: 7px 14px; font-size: .88rem; font-weight: 600; margin: 0 6px 8px 0; }
.tip-box { background: #FBF4EF; border-radius: 12px; padding: 14px 16px; font-size: .92rem; margin-top: 10px; }

/* 에고그램 바 차트 */
.ego-bars { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.ego-row { display: grid; grid-template-columns: 42px 1fr 34px; align-items: center; gap: 10px; }
.ego-name { font-weight: 700; font-size: .9rem; color: var(--ink); }
.ego-track { height: 14px; background: var(--line); border-radius: 7px; overflow: hidden; }
.ego-fill { height: 100%; border-radius: 7px; width: 0%; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.ego-fill.c1 { background: #E4573D; } .ego-fill.c2 { background: #17A2A6; }
.ego-fill.c3 { background: #5B6B9E; } .ego-fill.c4 { background: #FFC533; }
.ego-fill.c5 { background: #6BBF59; }
.ego-score { font-size: .82rem; color: var(--ink-soft); text-align: right; }
.ego-desc { font-size: .88rem; color: var(--ink-soft); margin-top: 12px; }

/* 한 줄 요약 카드 (종합 리포트 상단) */
.summary-card { background: var(--paper); border: 2px solid var(--sage); border-radius: var(--radius); padding: 18px 18px 14px; margin-bottom: 14px; }
.summary-card .sc-title { font-size: .78rem; letter-spacing: .12em; color: var(--sage-deep); font-weight: 800; margin-bottom: 10px; }
.summary-card .sc-line { font-size: .95rem; line-height: 1.7; margin-bottom: 4px; }
.summary-card b { color: var(--sage-deep); }

/* 동료와 나눠볼 질문 */
.talk-q { font-size: 1.02rem; font-weight: 700; line-height: 1.7; color: var(--ink); background: #F0F9F9; border-left: 4px solid var(--sage); border-radius: 0 12px 12px 0; padding: 14px 16px; }
.talk-hint { font-size: .8rem; color: var(--ink-soft); margin-top: 10px; }

/* 캡처용 자랑 카드 */
.capture-overlay { position: fixed; inset: 0; z-index: 100; background: linear-gradient(160deg, #0E7C80, #0A5C5F); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; animation: fadeIn .3s ease; }
.capture-card { background: var(--paper); border-radius: 24px; padding: 26px 24px; width: min(88vw, 340px); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.capture-card img { width: 78%; border-radius: 16px; margin: 10px 0 12px; }
.cc-brand { font-size: .68rem; letter-spacing: .18em; color: var(--terra); font-weight: 800; }
.cc-code { font-size: .85rem; letter-spacing: .2em; color: var(--sage-deep); font-weight: 700; }
.cc-nick { font-size: 1.5rem; margin-top: 2px; }
.cc-tag { font-size: .88rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.55; }
.cc-energy { font-size: .85rem; color: var(--sage-deep); font-weight: 700; margin-top: 10px; background: #EFF7F2; border-radius: 999px; padding: 6px 12px; display: inline-block; }
.cc-guide { color: #DFF3F0; font-size: .9rem; margin-top: 18px; font-weight: 600; }
.cc-close { width: min(88vw, 340px); margin-top: 10px; }

/* 갭 인사이트 */
.gap-card { background: linear-gradient(150deg, #0E7C80, #0A5C5F); color: #F4FCFC; border-radius: var(--radius); padding: 24px 20px; margin-bottom: 14px; }
.gap-card h3 { color: #FFC533; font-size: 1rem; margin-bottom: 10px; }
.gap-card p { font-size: .95rem; line-height: 1.7; }

.result-actions { display: flex; gap: 10px; margin: 18px 0 8px; }
.result-actions .btn { padding: 14px; font-size: .95rem; }

/* ---------- 도감 ---------- */
.dogam-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dogam-header h2 { font-size: 1.25rem; }
.dogam-desc { font-size: .85rem; color: var(--ink-soft); margin: 4px 0 18px 36px; }
.dogam-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dogam-card {
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px;
  padding: 16px 14px; text-align: center; cursor: pointer; transition: transform .12s ease, border-color .15s;
}
.dogam-card:active { transform: scale(.97); border-color: var(--sage); }
.dogam-card img { width: 82%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 10px; background: #F1EDE5; }
.dogam-card .code { font-size: .72rem; letter-spacing: .15em; color: var(--terra); font-weight: 700; }
.dogam-card .nick { font-size: .95rem; font-weight: 700; margin-top: 2px; }
.dogam-card .hint { font-size: .74rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.45; }
.img-fallback { width: 82%; aspect-ratio: 1; border-radius: 12px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; background: #F1EDE5; color: var(--sage-deep); font-size: 1.6rem; font-family: 'Noto Serif KR', serif; font-weight: 700; }

/* PC에서도 예쁘게 */
@media (min-width: 720px) {
  body { background: #F5F0E1; }
  #app { max-width: 480px; box-shadow: 0 0 60px rgba(61,56,51,.08); background: var(--cream); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}