/* 마인드테스트 공통 스타일 - 모바일 우선, 375px에서 가로 스크롤 없음 - 테스트별 키 컬러는 로 지정 */ :root { color-scheme: light; --key: #ff7a7a; --key-dark: #e05555; --key-soft: #ffeaea; --bg: #fff8f3; --card: #ffffff; --ink: #2c2a33; --ink-soft: #6b6773; --line: #ece7e3; --radius: 20px; --tap: 48px; --wrap: 560px; } body[data-theme="love"] { --key: #ff7a7a; --key-dark: #e05555; --key-soft: #ffeaea; --bg: #fff6f4; } body[data-theme="kkondae"] { --key: #4a5b8c; --key-dark: #35446d; --key-soft: #e8ecf7; --bg: #f4f6fb; } body[data-theme="vocab"] { --key: #3f9e73; --key-dark: #2e7a58; --key-soft: #e4f4ec; --bg: #f3faf6; } body[data-theme="burnout"] { --key: #7b5ea7; --key-dark: #5c4184; --key-soft: #ede8f7; --bg: #f7f4fc; } body[data-theme="digital"] { --key: #2196b0; --key-dark: #16738a; --key-soft: #ddf1f6; --bg: #f2fafc; } body[data-theme="tmi"] { --key: #e8924a; --key-dark: #c06d28; --key-soft: #fdeede; --bg: #fff9f4; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; } body { background: var(--bg); color: var(--ink); font-family: 'Gowun Dodum', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: 17px; line-height: 1.65; -webkit-text-size-adjust: 100%; word-break: keep-all; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 20px 18px 64px; } a { color: var(--key-dark); } /* ---------- 헤더 ---------- */ .site-head { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 0 10px; } .site-head a { color: var(--ink); text-decoration: none; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .site-head .dot { color: var(--key); } .lede { margin: 0 0 22px; text-align: center; color: var(--ink-soft); font-size: 15px; } /* ---------- 카드 (홈 목록) ---------- */ .card-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; text-decoration: none; color: inherit; box-shadow: 0 2px 10px rgba(60, 50, 45, 0.05); } .card:active { transform: scale(0.99); } .card .emoji { font-size: 40px; line-height: 1; display: block; margin-bottom: 8px; } .card h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.02em; } .card p { margin: 0; color: var(--ink-soft); font-size: 15px; } .card .meta { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px; background: var(--key-soft); color: var(--key-dark); font-size: 13px; } /* ---------- 질문 화면 ---------- */ .progress { height: 8px; border-radius: 999px; background: var(--key-soft); overflow: hidden; } .progress-bar { height: 100%; width: 0; border-radius: 999px; background: var(--key); transition: width 0.25s ease; } .quiz-top { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 26px; min-height: var(--tap); } .btn-back { min-height: var(--tap); padding: 0 4px; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 15px; cursor: pointer; } .btn-back[disabled] { opacity: 0.3; cursor: default; } .q-count { color: var(--ink-soft); font-size: 15px; font-variant-numeric: tabular-nums; } .q-text { margin: 0 0 24px; font-size: 22px; font-weight: 700; line-height: 1.45; letter-spacing: -0.02em; } .answers { display: grid; gap: 12px; } .answer { display: block; width: 100%; min-height: var(--tap); padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: inherit; font: inherit; font-size: 16px; line-height: 1.5; text-align: left; cursor: pointer; } .answer:hover { border-color: var(--key); } .answer:active { background: var(--key-soft); } .test-title { margin: 0 0 14px; text-align: center; font-size: 15px; font-weight: 400; color: var(--ink-soft); } .q-text:focus { outline: none; } .q-grade { display: inline-block; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px; background: var(--key-soft); color: var(--key-dark); font-size: 13px; } .q-grade:empty { display: none; } /* ---------- 결과 화면 ---------- */ .result-head { text-align: center; padding: 8px 0 4px; } .result-kicker { margin: 0; color: var(--ink-soft); font-size: 15px; } .result-emoji { font-size: 76px; line-height: 1.1; margin: 6px 0 2px; } .result-name { margin: 0 0 6px; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; color: var(--key-dark); } .result-score { display: inline-block; margin-bottom: 8px; padding: 5px 16px; border-radius: 999px; background: var(--key-soft); color: var(--key-dark); font-size: 15px; } .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; margin: 16px 0; } .panel h2 { margin: 0 0 10px; font-size: 16px; color: var(--ink-soft); font-weight: 700; } .panel p { margin: 0; } .traits { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .traits li { position: relative; padding-left: 22px; } .traits li::before { content: '✓'; position: absolute; left: 0; color: var(--key); font-weight: 700; } .brag { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--key-soft); color: var(--key-dark); font-size: 17px; text-align: center; } /* ---------- 버튼 ---------- */ .btn-row { display: grid; gap: 10px; margin: 14px 0; } .btn-row.two { grid-template-columns: 1fr 1fr; } .btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; font-size: 16px; text-decoration: none; text-align: center; cursor: pointer; } .btn:hover { border-color: var(--key); } .btn-primary { background: var(--key); border-color: var(--key); color: #fff; font-weight: 700; } .btn-primary:hover { background: var(--key-dark); border-color: var(--key-dark); } .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); padding: 12px 20px; border-radius: 999px; background: rgba(44, 42, 51, 0.92); color: #fff; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- 광고 슬롯 ---------- */ .ad-slot { margin: 24px 0; min-height: 1px; text-align: center; } /* ---------- 푸터 ---------- */ .site-foot { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; text-align: center; } .site-foot a { color: var(--ink-soft); } @media (min-width: 600px) { body { font-size: 18px; } .q-text { font-size: 25px; } .result-name { font-size: 36px; } }